使用场景: 需要对一个 prop 进行“双向绑定”。
vue父子通信是单向数据流，也就是子组件不能修改父组件的值。
但是在很多情况下，子组件得到父组件的传值后，还需要再修改父组件传入的这个原始值。
原始的父子组件传值
父组件
<child-cop :cmessage=“message” @update:cmessage="handler"></child-cop>
data: {
message: '父组件中的message'
}
methods: {
handler(item) {
this.message = item
}
}
稍微再化简一下, 模板字符串中用$event获取$emit传递的第二个参数
<child-cop :cmessage=“message” @update:cmessage="message = $event"></child-cop>
data: {
message: '父组件中的message'
}
子组件
props: ['cmessage'],
methods: {
changeMessage() {
this.$emit('update:cmessage', '修改的值')
// 注意不能直接修改父组件的传值 this.cmessage，只能传值给父组件，在父组件中修改原始的message
}
}
这样当点击“父组件中的message”，就会变成“修改的值”。父组件将“父组件中的message”传递给子组件，子组件又将“修改的值”传递给父组件，形成了“双向绑定”。
使用sync修饰符
父组件中的代码就可以简化如下：
<child-cop :cmessage.sync="message"></child-cop>
总结
父组件将message的值传给子组件的，子组件中触发事件update:xxx需要修改父组件的message，就可以用.sync修饰符简化：
<child-cop :xxx.sync="message"></child-cop>
.sync修饰符其实就是将上述代码转换成
<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>
