Vue中.sync修饰符的使用

使用场景: 需要对一个 prop 进行“双向绑定”。

vue父子通信是单向数据流，也就是子组件不能修改父组件的值。

但是在很多情况下，子组件得到父组件的传值后，还需要再修改父组件传入的这个原始值。

最原始的父子组件的传值

//父组件
<child-cop :cmessage=“message” @update:cmessage="handler"></child-cop>

 data: {
        message: '父组件中的message'
      }
 methods: {
    handler(item) {
        this.message = item
    }
 }


//精简一下
<child-cop :cmessage=“message” @update:cmessage="message = $event"></child-cop>
 data: {
        message: '父组件中的message'
      }


//子组件
props: ['cmessage'],
methods: {
    changeMessage() {
       this.$emit('update:cmessage', '修改的值')
// 注意不能直接修改父组件的传值 this.cmessage，只能传值给父组件，在父组件中修改原始的message
    }
}

使用.sync后的父组件中的代码可以简化

<child-cop :cmessage.sync="message"></child-cop>