深入理解.sync修饰符

1、为什么会有.sync这样的修饰符呢？

sync：同步，同时，使同步

vue官网的解释：在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

个人理解：首先一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop，.sync就是这种方法的简化。

用法：在子组件中以 update:myPropName 的模式触发事件取而代之。父组件中:myPropName.sync

先看一个简单的示例：

示例如下：

没有使用.sync的代码

子组件：

<template>
  <div>
    <p>子组件：{
   
   {
   
   title}}</p>
    <button @click="change1">点击我，改变title值</button>
  </div>
</template>
<script>
export default {
   
   
    props:{
   
   
        title:{
   
   
            type:String
        }
    },
    methods:{
   
   
        change1(){
   
   
            this.$emit('change','加油');
        }
    }
};
</script>

父组件：

<template>
  <div>
    <p>父组件：{
   
   {
   
   title}}</p>
    <child2