.sync的由来

Vue 2.3.0 引入了.sync 修饰语用于修饰 v-bind（即 :），使之成为双向绑定。这同样是语法糖（双向绑定会带来维护上的问题），添加了 .sync修饰的数据绑定会像v-model 一样自动注册事件处理函数来对被绑定的数据进行赋值。这种方式同样要求子组件触发特定的事件。不过这个事件的名称好歹和绑定属性名有点关系，是在绑定属性名前添加 update: 前缀。

.sync修饰符的应用

.sync的作用

• 通常我们需要通过事件机制，子组件发送一个事件，父组件监听修改值
• .sync可以省去监听这一步

.sync的用法

• 在父组件传props的时候后面添加一个.sync修饰符
• 通过在子组件中发送"update:prop"事件直接更新prop

//子组件
this.$emit('update:prop', prop)
//父组件
<div :prop.sync="prop" />
//可以实现prop的联动