vue2中.sync操作符的使用方法

.sync操作符简化了父子组件传参后更新值的操作，减少了一半的开发量通过.sync代替实现。

原来的实现逻辑（父组件v-bind传参给子组件，子组件props接收传过来的值，子组件中button上定义点击事件，事件中通过this.$emit(“事件名”,”修改的值”)来传给父组件，最后父组件在子组件上用子组件定义的事件名来获取子组件修改的内容。）

过程相对繁琐故基本使用.sync来代替。

例如：

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component :message.sync="message"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  name: 'ParentComponent',
  data() {
    return {
      message: '父组件'
    };
  },
  components: {
    ChildComponent
  }
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <input type="text" v-model="Message">
    <button @click="updateMsg">Update Message</button>
  </div>
</template>
 
<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      default:""
    }
  },
  data() {
    return {
      Message: this.message
    };
  },
  methods: {
    updateMsg() {
      this.$emit('update:message', this.Message);
    }
  }
}
</script>

父组件中通过v-bind传值给子组件并在绑定的属性后添加.sync，子组件通过props接受到对应的message值，

在子组件中定义对应的Message在页面展示，给对应的按钮添加点击事件，通过this.$emit来更新组件的值

（特别注意：第一个参数的值一定要写成“update：props对应的值”），

第二个参数是要修改的值，这样就能实现组件的实时更新了。