持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情
为什么会有.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 {
name: 'child2',
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 {
name: 'child2',
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 {
name: 'child2',
components: {
child2
},
data() {
return {
title: "努力着，从不放弃",
ifshow:false
};
},
methods: {
show(){
this.ifshow = true;
}
}
};
</script>
展示效果如下：
点击展示按钮：
然后点击关闭，子组件就不展示了。
以上就是对.sync做的一个总结。
中间有一个小插曲，运行的时候报错了：
翻译成中文：属性或方法“show”不是在实例上定义的，而是在渲染期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选项中，还是在基于类的组件中。 为什么会报这个错呢，说明show方法没有被读取到，或者是没有定义，看了一下show没有拼错。检查了好一会，发现，我在定义方法的时候，把methods写成了medthods，导致方法都读取不到，找对解决问题的方向很重要。
改成methods之后就ok了。以此为戒！要细心！
这是我之前发表在其他平台上的原创文章。
世上无难事，只要肯攀登。
我们下篇文章再见！
