[ Vue ] 理解 vue 中修饰符 sync 的作用
原创
修饰符 sync 的作用：
sync 修饰符的作用就是实现父子组件数据的双向绑定，简化功能逻辑代码 。当然，v-model 也是可以实现数据的双向绑定，但是，一个组件只有一个 v-model，所以 ， v-model 只能针对一个变量进行数据绑定，而 sync 修饰符可以实现多个参数的数据双向绑定。
组件数据更新实现方法：
在不依赖双向绑定的标签或者 v-model 方法下，父子数据的更新就是通过绑定函数在父级组件中更新数据。
<!-- 父级组件：-->
<template>
<div>
<rules-modal :isShow="isShowRules"
@clickModal="modalTrigger">
</rules-modal>
</div>
</template>
<script>
export default {
data(){
return{
isShowRules : false,
}
},
methods: {
modalTrigger($Event){
this.isShowRules = $Event;
},
},
};
</script><!-- 子级组件：-->
<template>
<div v-if="isShow" class="rules-modal">
<p @click="closeModal()">嗯嗯</p>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false,
}
},
methods: {
closeModal() {
this.$emit('clickModal',false);
}
},
};
</script>优化步骤一：
将父组件的 @clickModal 改为 @update:isShow 同时，将 $emit 方法更新为 update:isShow，
父组件的子组件引用绑定方法 也可以改成匿名函数，变成 @update:isShow="isShowRules = !isShowRules" , 如下图，
<!-- 父级组件：-->
<template>
<div>
<rules-modal :isShow="isShowRules"
@update:isShow="isShow => isShowRules = isShow">
</rules-modal>
</div>
</template>
<script>
export default {
data(){
return{
isShowRules : false,
}
},
};
</script><!-- 子级组件：-->
<template>
<div v-if="isShow" class="rules-modal">
<p @click="closeModal()">嗯嗯</p>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false,
}
},
methods: {
closeModal() {
this.$emit('@update:isShow',false);
}
},
};
</script>优化步骤二：
将父组件 :isShow="isShowRules" 加上 sync ，变成 :isShow.sync="isShowRules" ，sync 如果用一句话来说就是同步更新了子组件的数据变化，而从实现的角度来说就是 sync 就是@update:isShow="isShow => isShowRules = isShow" 的语法糖，是一种简写的形式。
代码如下：
<!-- 父级组件：-->
<template>
<div>
<rules-modal :isShow.sync="isShowRules">
</rules-modal>
</div>
</template>
<script>
export default {
data(){
return{
isShowRules : false,
}
},
};
</script>到了这里，已经可以完成一个基本的 modal 的显示和隐藏的实现，实现的逻辑比一开始的要简单得多，不需要将更新数据的逻辑交给父级组件来实现数据更新，只要给绑定的数据加上一个同步更新的标记就可以，是非常易于理解的。
需要注意的点是，通常在业务逻辑处理中，父级组件传递给子级组件的一般不仅只有一个 boolean值，肯定会有数组或者对象传入做逻辑处理。而子级组件是不能直接修改 prop 的参数的，可以使用一个 watch 接收，再赋予一个新值。把数据处理完毕 再同步更新到父级组件，这里就还是用一个 boolean 来举例：
<!-- 子级组件：-->
<template>
<div v-if="isShow" class="rules-modal">
<p @click="closeModal()">嗯嗯</p>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false,
}
},
data() {
return {
isShowModal: null,
};
},
methods: {
closeModal() {
this.isShowModal = false;
this.$emit('update:isShow',this.isShowModal);
}
},
watch: {
isShow: {
handler: function (nv, ov) {
this.isShowModal = nv;
},
deep: true,
immediate: true
},
},
};
</script>触发数据更新之后没有报错，就说明可以了，以上就是关于 .sync 的原理和使用。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
