继上篇文章：Vue2中如何优雅的实现dialog的封装 ，再来一篇Vue3中的弹窗封装方式，我们要追逐新的技术，及时更新自己的知识库。

由于在Vue3中使用的UI是ElementPlus及关于Vue3的一些新特性，所以弹窗中的写法略有不同。例如控制弹窗显示的prop值不再是visible属性的值进行控制，而是改为了 v-model进行绑定变量进行使用；弹窗的头部插槽、脚部插槽写法根据vue3的特性，写法不再是slot="footer"，而是改为v-slot:footer或#footer 并且只能绑定在template标签体或者自定义组件身上上。

弹窗组件的编写

<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>

至此，Vue3中一个完整的自定义弹窗就完成了，具体的写法相比Vue2还是有些差别的。你学废了没？有问题可评论区聊~