vue的sync修饰符

Posted 2023-05-02

参考技术A

1、由于vue2xx父子组件传递数据是单向传递

2、子组件不能修改props中父组件传递的数据

3、为了能修改父组件的数据，一般用用事件的方式，如this.$emit(\'update:xxx\',yyy),（其中xxx就是props中定义的属性，yyy为修改的值），然后父组件定义子组件的事件@update:xxx="func",在func中修改父组件要传递给子组件的数据

4、而vue的sync修饰符，它省略了父组件的事件的注册，能使子组件修改props的属性，其实它是一个语法糖，本质上没有改变父子组件数据单向传递

5、举例：

定义子组件son.vue的内容：

定义父组件father.vue的内容：

6、说明：

从父组件的文本框中输入数据，子组件的的msg和文本框跟着变化，而从子组件的

文本框输入数据，同样父组件也变化

7、结论：

vue的sync只是帮助使用者省略事件的注册，是一个语法糖，并不改变父子数据流向

vue2.0修饰符sync用法

如果子组件是一个弹窗，我们想通过点击关闭按钮来关闭子组件弹窗，子组件弹窗的v-show由变量isVisible控制，这个变量通过props由父组件来注入，

而子组件无法改变props里面的变量的值，但可以通过sync修饰来实现，代码如下:

子组件：

<button @click="close">关闭</button>

 

    export default {
        props: {
            isVisible: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            close () {
                this.$emit(‘update:isVisible‘, false);
            }
        }
    };

父组件：

<chlid-component :isVisible.sync="isVisible"></chlid-component>