Vue中.sync修饰符使用总结

参考原文:https://www.jianshu.com/p/a2ce0bbb5220
场景应用： props进行双向绑定

普通操作

  //父组件
  <div id="app">
      <div>父组件</div>
      <span>父组件中显示父组件的值:  {{fatherMsg}}</span>
        <HelloWorld :msgs="fatherMsg" @update:msgs="handler">
         </HelloWorld>
  </div>
<script>
 import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
        fatherMsg:'父组件的msg'
    }
  },
  methods:{
      handler(item) {
          this.fatherMsg = item
      }
  }
}
</script>

//子组件中
<template>
  <div class="hello">
    <h1>子组件中显示 :{{ msgs }}</h1>
      <button @click="changeMessage">click</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msgs: String,
  },
    data() {
        return {
        }
    },
    methods:{
        changeMessage(){
            this.$emit('update:msgs', '修改的值')
// 注意不能直接修改父组件的传值 this.msgs，只能传值给父组件，在父组件中修改原始的message
        }
    }
}
</script>

sync操作

//父组件
     <HelloWorld :msgs.sync="fatherMsg" >
  
      </HelloWorld>
//父组件的script部分以及子组件代码均不变

总结

父组件将message的值传给子组件的，子组件中触发事件update:xxx需要修改父组件的message，就可以用.sync修饰符简化(sync操作符的时候子组件emit必须是'update:xxx' 名字)：

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

.sync修饰符其实就是将上述代码转换成

<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>