如何理解.sync修饰符

72 阅读1分钟

定义

.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值,其实就是一个语法糖,会被扩展为一个自动更新父组件属性的 v-on 监听器。

//正常父传子
<Son :a="num" /> 

//加上sync之后的父传子
<Son :a.sync="num" />

//它等价于
<Son :a="num" @update:a="val=>a=val" /> 

//相当于多了一个事件监听,事件名是update:a,

//回调函数中,会把接收到的值赋值给属性绑定的数据项中。

注意

这里面的传值与接收和正常的父组件向子组件传值没有区别,唯一的区别在于子组件往回传值的时候$emit所调用的事件名必须是update:属性名

总结

.sync的作用就是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。