深入理解.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 :title="title" @change="getChange"></child2>
  </div>
</template>
<script>
import child2 from "./child2.vue";
export default {
  components: {
    child2
  },
  data() {
    return {
      title: "努力着，从不放弃"
    };
  },
  methods: {
    getChange(value) {
      this.title = value;
    }
  }
};
</script>

点击按钮之后

使用.sync的代码之后，简化上面的流程

子组件：

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

父组件：

<template>
  <div>
    <p>父组件：{{title}}</p>
    <child2 :title.sync="title"></child2>
  </div>
</template>
<script>
import child2 from "./child2.vue";
export default {
  components: {
    child2
  },
  data() {
    return {
      title: "努力着，从不放弃"
    };
  }
};
</script>

展示的结果和上面是一样的。

说一下.sync实际应用场景：常用于关闭弹框组件
模拟的弹窗场景示例如下：
子组件：

<template>
  <div v-if="ifshow">
    <p>子组件：{{title}}</p>
    <button @click="close">关闭弹窗</button>
  </div>
</template>
<script>
export default {
    props:{
        title:{
            type:String
        },
        ifshow:{
            type:Boolean
        }

    },
    methods:{
        close(){
            this.$emit('update:ifshow',false);
        }
    }
};
</script>     

父组件：

<template>
  <div>
    <p>父组件：{{title}}  <button @click="show">展示弹窗</button></p>
    <child2 :title="title" :ifshow.sync='ifshow'></child2>
  </div>
</template>
<script>
import child2 from "./child2.vue";
export default {
  components: {
    child2
  },
  data() {
    return {
      title: "努力着，从不放弃",
      ifshow:false
    };
  },
  methods: {
    show(){
      this.ifshow = true;
    }
  }
};
</script>

展示效果如下：

点击展示按钮： 然后点击关闭，子组件就不展示了。

以上就是对.sync做的一个总结。

中间有一个小插曲，运行的时候报错了：

翻译成中文：属性或方法“show”不是在实例上定义的，而是在渲染期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是在基于类的组件中。

为什么会报这个错呢，说明show方法没有被读取到，或者是没有定义，看了一下show没有拼错。检查了好一会，发现，我在定义方法的时候，把methods写成了medthods，导致方法都读取不到，找对解决问题的方向很重要。

改成methods之后就ok了。以此为戒！要细心！

温馨小提示：v-on="{a: f()}"等价于v-on:a="f()"