dialog组件使用，如何优雅的二次封装dialog组件

这里dialog组件以element plus中的举例
1、正常使用
我们通过v-model进行绑定变量，通过控制变量来达到dialog的出现与消失。

<template><div><button @click="flg = true">点击出现dialog</button><el-dialog v-model="flg">自定义内容展示</el-dialog></div>
</template>
<script setup>import { ref } from "vue";let flg = ref(true);
</script><style scoped >
</style>

2、优雅的二次封装
一个项目中，dialog的使用频率一般是比较高的，因此我们大部分会选择对它进行二次封装。

<template><div><p>传递的值{{obj}}</p><el-dialog v-model="flg"></el-dialog></div>
</template>
<script setup>import { ref } from "vue";//组件内部flg变量来控制dialog的消失与出现let flg = ref(false);let obj = ref({})//show方法来控制dialog的出现let show = (val)=>{//val是传递的值//  .....进行一系列的值处理，调接口，传参等操作obj.value = valflg.value  = true}//hidd来控制dialog的隐藏let hidd = ()=>{flg.value  = false}//将定义的方法暴露出去，也可以暴露更多的方法来达到想要的效果。defineExpose({show,hidd})
</script><style scoped >
</style>

使用

<template><div><button @click="fn">点击按钮子出现dialog二次封装组件</button><dialogCom ref="dialogFlg"></dialogCom></div>
</template>
<script setup>import dialogCom from "./childre/child2/newdialog.vue";import { ref } from "vue";let dialogFlg = ref(null);let fn = () => {dialogFlg.value.show({ name: "tjq", age: "18" });};
</script><style scoped >
</style>

这种封装并不需要依赖props进行传值控制dialog的消失或出现，并且不需要对props进行监听然后做出回应，相对传统的props传值而言，我个人是比较偏向这种的。