Vue中.sync语法糖

在组件传值中 本篇文章只关注子组件给父组件传值 也就是自定义事件的方式

其实简单来说，.sync修饰符就是用来在子组件中修改父组件传进来的值

下面是我对这个修饰符的理解：

父组件：

子组件：

上述方法是传统的，父组件绑定自定义事件，由子组件去触发自定义事件，接收到子组件传过来的值，然后对父组件的数据加以修改

下面对.sync的解析需要一点Vue3的知识

首先将父组件绑定的自定义事件修改为：
 

子组件也做对应调整：

upIsShow(){
    this.$emit("update:isShow",false);
}

然后将父组件的changeIsShow直接写成匿名函数：

再将函数体改为箭头函数：
 

最后变成这个样子：

:isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖。是其一种简写形式

如果觉得以上代码太麻烦或者直接就是看不懂的状态

那么应该去学习一下vue3关于v-model的一些改动，可能会对你有一些帮助；

完整代码：

父组件

子组件

总结

sync简单来说就是为子组件修改父组件中的数据提供了简便的方式，以后使用子组件修改父组件的某些数据的时候，就可以使用sync了

注意

vue3似乎已经废弃了sync修饰符，具体的信息可以去官方文档查看