Vue中的修饰符 .sync

一、.sync修饰符的介绍

从2.3.0版本起，Vue重新引入了 .sync修饰符。实现了父子组件数据之间的双向绑定 ， 与v-model类似 . 一般的应用场景就是 在父组件data定义了一个变量 , 我们希望可以在子组件中修改他

二 、.sync修饰符的使用

1.不使用 .sync实现父子数据绑定:

// 在子组件中
<MySon>
 
methods:{
// 通过触发自定义事件来传递
this.$emit('setAge',23)
 
}
 
</MySon>
 
// 父组件中
 
<MyFather :age="age" @setAge="res => age = res">
</MyFather>  // 在父组件中通过监听自定义事件来修改数据

 

2.使用 .sync实现父子数据绑定:

<MyFather :age.sync="age">
</MyFather>
 
// 等价于
 
<MyFather :age="age" @update:age="res => age = res">
</MyFather>
 
// 相当于多了一个事件监听 , 事件名是update:age , 回调函数中, 会把接收的值赋值给属性绑定的数据项中

 三、.sync修饰符和v-model的区别:
相同点 : 都是语法糖 , 都可以实现父子组件中的数据的双向通信;
不同点 :格式不同 : v-model = "age" , :age.sync = "age"
绑定的事件不同 : v-model : @input + :value  , :age.sync : @update:age
v-model只能使用一次 , .sync修饰符可以使用多次