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: {
        value: {
            type: Boolean
        }
    },
    watch: {
        value(value) {
            this.dialogVisible= value
        }
    },
    data() {
        return {
            dialogVisible: false,
        }
    },
    methods: {
        handleClose(val) {
            this.$emit('input', false)
        },
    },
}
</script>

computed OR watch ?

對於上面的兩種方案，子組件內部還可使用計算屬性的寫法

computed

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