Vue3中结合ElementPlus实现弹窗的封装方式

<script setup lang="ts">
import { ref, defineEmits, defineExpose } from 'vue'

const emit = defineEmits(['confirmDia'])
let showDia = ref<boolean>(false)

const openDia = (): void => {
  showDia.value = true
}  

const closeDia = (): void => {
  showDia.value = false
}

const confirmDia = (): void => {
  emit('confirmDia', '弹窗内容事件处理完毕，信息传给父组件。')
}  
// vue3中规定，使用了 <script setup> 的组件是默认私有的：
// 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露
defineExpose({
  openDia,
  closeDia
})

</script>

<template>
   <el-dialog 
		title="Dialog" 
		@close="closeDia" 
		v-model="showDia"
	>
   		
    <template v-slot:footer>
        <el-button @click="confirmDia" type="primary">确定</el-button>
        <el-button @click="closeDia" type="primary" plain>取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from './components/MyDialog.vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
// 为了获取 MyDialog 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型
let dialog = ref<InstanceType<typeof MyDialog> | null>(null)

const open = (): void => {
    dialog.value?.openDia()
}
const confirmDia = (val: string): void => {
  console.log(val)
  dialog.value?.closeDia()
}
</script>

<template>
  <MyDialog ref="dialog" @confirmDia="confirmDia"/>
  <el-button @click="open" type="primary">打开弹窗</el-button>
</template>