浅析Vue中的 .sync 修饰符

Posted 2023-05-02

参考技术A 当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。（如果子组件直接操作，vue会有警告提示）。

一个Vue应用中有一个父组件包含了一个子组件，子组件接收了父组件传入的一个外部变量（props），子组件通过$emit让父组件监听到子组件的一个事件，该事件修改了外部变量props，然后将修改后的结果同步给父组件中被.sync修饰的属性。

以上示例的实现流程如下：

组件myComponent接收了外部变量show，也就是父组件的:show传入的data中的valueChild的值；

组件myComponent通过$emit使父组件能够监听到update:show事件；

父组件通过 v-on:update:show="valueChild = $event" 监听到update:show事件的返回值$event，并将$event值同步到valueChild；

v-on:update:show="valueChild = $event" 则被简写为 :show.sync

vue修饰符sync

vue修饰符sync

 

1.sync介绍：vue是单向数据流，也就意味着子组件是无法修改父组件传过来的参数，只能通过自定义事件通知父组件去修改，sync解决了这个问题，单其实sync并没有改变单向数据流，只是简化了步骤，其实就是一个语法糖

// 子组件

<template>

    <div>{{ value }}</div>

    <button @click="fn">改变value的值</button>

</template>

<script>
export default {

   name: ‘DongDialog‘,

   props: {

        value: {
            
            type: String

            default: ‘你好sync‘
        }
   },

    methods: {

        fn () {

           // 如果点击按钮修改父组件传过来的value值的话会报错
        
            this.value = ‘你好美女‘    // 报错

            // 使用sync的语法糖来解决

            /*

                注意update冒号后面的对应值必须是父组件穿归来的数据

                第二个参数是需要修改的值
            */
            this.$emit(‘update:value‘, ‘我去天气好热‘)"
        }
    }
}
</script>    



// 父组件

<template>
    
    <!--注意父组件要加上sync修饰符-->
    <dialog :value.sync="value"></dialog>  

</template>

<script>
import dialog from ‘../../components/Dialog‘
export default {

    name: ‘parent‘,

    data () {
    
        return {

            value: ‘漂亮的大美女‘
        }
    },

    components: {

        dialog 
    }
}
</script>