在一些情况下，我们可能会需要对一个prop（父子组件传递数据的属性）进行‘双向绑定’,vue重新引入.sync修饰符，是作为编译时的一个语法糖，它会被扩展为一个自动更新父组件属性的v-on监听器。
普通写法：
<text-decoment v-bind:title='title' v-on:update:title='title=$event'></text-document>
语法糖写法：
<text-document v-bind:title.sync="doc.title" ></text-document>
Vue.component('text-document', {
props: ['title'],
template: ` <div> <button @click='setNewTitle'>更新标题</button> </div> `,
methods:{
setNewTitle:function(){//手动进行更新父组件中的值
this.$emit('update:title', '这步操作修改标题实现prop双向绑定')
}
}
})
var vm = new Vue({ el:'#app', data:{ doc:{ title:'对prop进行“双向绑定”' } }, });
.sync也可以是对象，绑定多个数据，vue会为每个数据绑定事件，但不能是表达式，表达式临界状态比较多，不好处理
demo:
<text-document v-bind:obj.sync="obj" ></text-document>
Vue.component('text-document', {
props: ['obj'],
template: ` <div> <button @click='setNewTitle'>更新标题</button> </div> `,
methods:{
setNewTitle:function(){//手动进行更新父组件中的值
this.$emit('update:obj', '这步操作修改标题实现prop双向绑定')
}
}
})