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>