1、在components目录下新建一个弹窗.vue文件，我这里是demoDialog.vue。

~template

javascript">
<template><div><el-dialog title="标题" v-model="visible" with="600px"><div class="dialog-content">我是弹窗</div><template #footer><div class="dialog-footer"><el-button @click="handleCancel">取消</el-button><el-button @click="handleConfirm">确认</el-button></div></template></el-dialog></div>
<template>

~JS

javascript"><script setup>
import { ref, reactive } from 'vue'/***  1.只暴露提供一个入口函数————openDialog()，保持组件内部封闭性*  2.数据交互尽量通过 openDialog() 方法来传递，减少外部状态依赖，固定的配置项参数才考虑用 props*/const emit = defineEmits(['confirm'])
let visible = ref(false)
// 打开弹窗 -- 可通过接收参数data来展示父组件的数据
const openDialog = (data) => {visible.value = trueconsole.log('data:', data);
}
// 提交
const handleConfirm = () => {emit('confirm', '我是传给父组件的数据222')visible.value = false
}
// 关闭
const handleCancel = () => {visible.value = false
}
// 暴露给父组件
defineExpose({openDialog
})</script>

 2、调用弹窗的父组件中引入并使用：

~template

javascript">  <!-- 弹窗组件 --><div>调用弹窗</div><el-button type="primary" @click="openDemoDialog">打开弹窗</el-button><demoDialog ref="demoDialogRef" @confirm="handleOnConfirm"></demoDialog>

~JS

javascript">/*** 3、弹窗组件* 数据交互尽量通过 openDialog() 方法来传递，减少外部状态依赖，固定的配置项参数才考虑用 props*/let demoDialogRef = ref()
// 通过ref调用子组件的方法
const openDemoDialog = () => {// 可以通过openDialog方法向弹窗内部传递参数，如弹窗要展示的数据demoDialogRef.value.openDialog({data:{name: '小白很白'}})
}
// 在弹窗里点击提交
const handleOnConfirm = (data) => {console.log('data', data);
}

3 总结：

        01、只暴露提供一个入口函数————openDialog()，保持组件内部封闭性；

        02、数据交互尽量通过 openDialog() 方法来传递，减少外部状态依赖，固定的配置项参数才考虑用 props。