element-ui + vue 实现在外层 父对话框|父组件 里点击打开 子组件|子对话框

以上截图来自element-ui官方描述，点击这里跳转至element-ui

----------------------------------下面是实现方法----------------------------------

父对话框：

<template>
    <div class="father">
        <el-dialog :title="father title"
                   :before-close="handleClose"
                   :visible.sync="dialogVisible">
            <div class="">
             外层对话框内容
            </div>
            <i @click="openSon"> 点击打开 子对话框</i>
        </el-dialog>
 		<SonDialog ref="son"/>//子对话框组件
    </div>
</template>

import SonDialog from './SonDialog.vue';

export default {
    name: 'FatherDialog',
    components: {
        SonDialog
    },
     methods: {
		openSon() {
            this.$refs.son.open();//通过ref找到子组件，并调用它的open方法；
		}
	}
}

子对话框：

    <el-dialog :title="son title"
               :before-close="handleClose"
               :visible.sync="sonVialogVisible"//子组件显隐
               append-to-body>
               
        <div class="">
          子对话框内容
        </div>
        
    </el-dialog>
</template>

export default {
    name: 'SonDialog',
    methods: {
        handleClose() {
			this.sonVialogVisible = false;//子组件关闭自己
        },
        open() {
			this.sonVialogVisible = true;//留给父组件调用 打开子组件
        },
    },
};