使用场景: 需要对一个 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>