vue父子组件关于模态框状态的绑定方案

日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如：

<template>
    <div class="page-xxx">
        // 点击打开新增弹窗
        <button> 新增 </button>
        // 点击打开编辑弹窗
        <button> 编辑 </button>
        // 点击打开详情弹窗
        <button> 详情 </button>
        <Add :showAdd="false"></Add>
        <Edit :showEdit="false"></Edit>
        <Detail :showDetail="false"></Detail>
    </div>
</template>

子组件：

<div class="page-add">
    <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {data() {
        return {dialogVisible: false,}
    },
    methods: {handleClose(val) {this.dialogVisible= false},
    },
}
</script>

如何实现子组件和父组件模态框状态的同步

方案一：使用 .sync 修饰符

父组件：

<template>
    <div class="page-xxx">
        // 点击打开新增弹窗
        <button @click="show = true"> 新增 </button>
        <Add :show.sync="show"></Add>
    </div>
</template>

子组件：

<div class="page-add">
    <el-dialog:visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
    props: {
        show: {type: Boolean}
    },
    watch: {show(value) {this.dialogVisible= value}
    },
    data() {
        return {dialogVisible: false,}
    },
    methods: {handleClose(val) {this.$emit('update:show', false);
        },
    },
}
</script>

方案二：使用 v -model

父组件：

<template>
    <div class="page-xxx">
        // 点击打开新增弹窗
        <button @click="show = true"> 新增 </button>
        <Add v-model="show"></Add>
    </div>
</template>

子组件：

<div class="page-add">
    <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
    props: {
        show: {type: Boolean}
    },
    watch: {show(value) {this.dialogVisible= value}
    },
    data() {
        return {dialogVisible: false,}
    },
    methods: {handleClose(val) {this.$emit('input', false)
        },
    },
}
</script>

computed OR watch ?

对于上面的两种方案，子组件内部还可以使用计算属性的写法

computed

export default {
    props: {
        show: {type: Boolean}
    },
    computed: {
        dialogVisible: {get() {return this.show},
            set(value) {return this.$emit('input', value)
            },
        },
    },
    methods: {handleClose(val) {},},
}