理解Vue的修饰符sync

vue在2.3.0版本中重新引入了.sync修饰符,但是这次的sync只是作为一个编译时的语法糖存在的，他会被扩展为一个自动更新父组件属性的v-on监听器,代码示例如下

<comp:foo.sync ='bar'></comp>
//被扩展成
//<comp:foo ='bar'v-on:'update:foo' ='bar =$event'></comp>
//<comp:foo ='bar' @update:foo ='value=>bar =value'></comp>

<child @click =$event('update:foo',newValue)/>

完整代码

所以sync的功能就是当子组件改变了一个prop的值，那么这个值也会在父组件中自动更新

• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)