[JavaScript知识库]vue中的.sync修饰符

?首先来看一下官网API的定义：

大概意思就是在Vue中，父子组件最常用的通信方式是通过props进行数据传递，并且只能是父到子的单向数据传递，子组件是不允许修改父组件传递过来的props的值。如果直接修改浏览器会报错。

但是有一些业务场景需要在子组件内部改变父组件传递过来的props值并更新到父组件中去，这时就需要用到.sync修饰符。

其实.sync也是一个语法糖：

// 子组件
<child :name.sync="name" ></child>

// 其实会编译成如下
<child :name="name" @update:name ="val => name = val"'></child>

// 子组件修改props值需要使用$emit
this.$emit('update:name', newValue)

下面来看一个完整的例子：控制弹窗的显示和隐藏

// 父组件

<template>
    <div id="father">
        <child :show.sync="show" ></child>
        <button @click="toggle">切换</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: true,
            }
        },
        methods:{
            toggle(){
                this.show = !this.show;
            }
        }
    }
</script>


// 子组件

<template>
    <div id="child">
        <div v-show="show">弹窗</div>
        <button @click="close">关闭</button>
    </div>
</template>
<script>
    export default {
        props:['show'],
        methods:{
            close(){
                this.$emit('update:show', false)
            }
        }
    }
</script>

总结：修饰符.sync的功能就是，当子组件可以改变父组件传递过来的props，并且这个变化可以同步到父组件中。