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

2024年1月20日 198次阅读 来源: Jaywin

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

<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) {},
    },
}
    原文作者：Jaywin
    原文地址: https://segmentfault.com/a/1190000019393513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞