深入理解.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()"