Vue中.sync语法糖

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

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

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

父组件：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child @upIsShow="changeIsShow" v-show="isShow"/>
    </div>
</template>
 
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件：

<template>
    <div>
         我是子组件
        <input type="button" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("upIsShow",false);
            }
        }
    }
</script>

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

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

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

<child @update:isShow="changeIsShow" v-show="isShow"/>

子组件也做对应调整：

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

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

<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>

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

<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>

最后变成这个样子：

<child :isShow.sync="isShow" v-show="isShow"/>

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

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

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

完整代码：

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
 
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

父组件👆

子组件 👇

<template>
    <div>
         我是一个子组件，我在红色的海洋里！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
 
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

总结

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

注意

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