Vue2中实现dialog的封装方式

<template>
        <el-dialog 
            title="新增"
            :visible="visibleDia"
            @close="closeDia"
            fullscreen
        >
        
            <!-- 弹窗内容自定义 -->

            <div slot="footer">
                <el-button @click="saveInfo" type="primary">保存</el-button>
                <el-button @click="closeDia" type="primary" plain>取消</el-button>
            </div>
        </el-dialog>
</template>

<script>
export default {
    name: 'SaveDialog',
    data() {
        return {
            visibleDia: false,
        }
    },
    methods: {
        openDia() {
            this.visibleDia = true
        },
        closeDia() {
            this.visibleDia = false
        },
        saveInfo() {
        // 告诉父组件，保存成功
			this.$emit('saveSuccess', true)
			this.closeDia()
		}
    }
}
</script>

<template>
    <div>


		<!-- 页面其他内容 -->
		
		<el-button @click="handleAdd">新增</el-button>
		
		<save-dialog
			ref="saveDialog"
			@saveSuccess="saveSuccess"
		 />
    </div>    
</template>

<script>
import SaveDialog from './SaveDialog.vue'
export default {
    name: 'Index',
    components: { SaveDialog },
    methods: {
        handleAdd() {
            this.$refs.saveDialog.openDia()
        },
        saveSuccess() {
        	// 此方法被调用时，说明弹窗的新增内容已完成
		}
    }
}
</script>