Vue 弹窗一个新增编辑页面

<template>
    <div>
        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-button
                    type="primary" size="medium" icon="el-icon-plus" @click="addDialog">添加</el-button>
            </el-row>
        </el-card>

        <add-or-update v-if="addOrUpdateVisible" @refreshFather="refreshList" ref="AddOrUpdateRef"></add-or-update>
    </div>
</template>

<script>
import AddOrUpdate from './Edit'

export default {
    data() {
        return {// 新增或编辑组件显示隐藏
            addOrUpdateVisible: false
        }
    },
    components: {
        AddOrUpdate
    },
    methods: {        // 新增
        addDialog() {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.AddOrUpdateRef.init()
            })
        },// 刷新列表 用于监听子组件新增编辑后触发
        refreshList(item) {
            this.addOrUpdateVisible = false            
        }
    }
}
</script>

<style lang="less" scoped>

</style>

子页面：

<template>
    <div>
        <!-- 内容主体区域 -->
        <el-dialog
            title="新增/编辑"
            :close-on-click-modal="false"
            :visible.sync="showDialog"
            width="60%" @close="setDialogClosed">
            <el-form
                ref="addFormRef"
                label-width="100px">

                <el-row>
                    <el-col style="text-align:center">
                        <el-button @click="showDialog = false">返 回</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {// 控制对话框显示隐藏
            showDialog: false,
        }
    },
    methods: {
        // 编辑初始化页面内容
        async init() {
            this.showDialog = true
        },
        // 关闭对话框触发
        setDialogClosed() {
            // 子组件调用父组件方法，并传递参数
            this.$emit('refreshFather')

        },
    }
}
</script>

<style lang="less" scoped></style>