vue中关于sync修饰符的作用

85 阅读1分钟

1、在Vue中,父子组件最常用的通信方式就是采用props进行数据传递,props值只能在父组件中更新并传递给子组件,而在子组件内部,是不允许改变传递进来的props值,这样做是为了保证数据单向流通。一旦在子组件内部改变传递的props值时,会报以下错误。 image.png image.png image.png image.png

2、但在某些场景下,我们需要在子组件内部改变props属性值并更新到父组件中,这时就需要用到.sync修饰符,sync修饰符可以双向绑定父子组件中的数据。

父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。 image.png image.png

image.png