vue3二次封装elementPlus的dialog弹窗组件

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

~template：

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

<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 = true
    console.log('data:', data);
}
// 提交
const handleConfirm = () => {
    emit('confirm', '我是传给父组件的数据222')
    visible.value = false
}
// 关闭
const handleCancel = () => {
    visible.value = false
}
// 暴露给父组件
defineExpose({
    openDialog
})

</script>

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

import demoDialog from '@/components/demoDialog.vue'

 ~template：

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

~js:

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

let demoDialogRef = ref()
// 通过ref调用子组件的方法
const openDemoDialog = () => {
  // 可以通过openDialog方法向弹窗内部传递参数，如弹窗要展示的数据
  demoDialogRef.value.openDialog({data:{name: '小白很白'}})
}
// 在弹窗里点击提交
const handleOnConfirm = (data) => {
  console.log('data', data);
}

 3、效果：

点击打开弹窗，可以看到弹窗打开了，并且能获取到父组件传过去的数据data：

在弹窗里点击确认提交，弹窗关闭，并且把数据提交给父组件：

 

4、总结：

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

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