[JavaScript知识库]父组件和子组件双向绑定的问题解决

1.第一种 (常用)

父组件传给子组件isShow方法，别名是isShow2，子组件可以通过$emit触发该父组件的方法

parent.vue

<children v-if="show"  @isShow2="isShow"></children>

import children from "./children";
export default {
    data() {
    return {
        show: false
    };
    },
    components: {
    	children
    },
    methods:{
        isShow(val){this.show = val;}
    }
};

children.vue

this.$emit("isShow2", false);

2.第二种

父组件传给子组件方法名为update:test的方法，方法体为val => show = val，子组件可以通过$emit触发该父组件的方法

parent.vue

<children @update:test="val => show = val" v-if="show"></children>

children.vue

this.$emit("update:test", false);

3.第三种

父组件传给子组件方法名为update:test的方法，方法体内直接将子组件的触发传的入参赋值给父组件的show变量，子组件可以通过$emit触发该父组件的方法

parent.vue

<children v-if="show" :test.sync="show"></children>

children.vue

this.$emit("update:test", false);

4.第四种 （不推荐）

children.vue

$parent.show = false

5.总结

第一种是比较常用的，因为我们在业务中，常遇到的场景是不仅要双向绑定改变父组件的值，还需要做其他方法的调用。
第三种是第二种的简写，第二种和第三种区别在于，第三种只能写变量，不接受表达式。
第四种，不推荐因为不方便维护，不能从父组件看到，子组件是会改变父组件的值。