您现在的位置是：首页 >技术杂谈 >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 = val
        flg.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传值而言，我个人是比较偏向这种的。