本文主要是介绍#11vue3中使用el-dialog展示与关闭交由父组件控制的写法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1、法一：通过defineEmits调用父组件方法
1.1、父组件
1.2、子组件（CONTENT）
2、法二：通过difineExpose暴露子组件属性
2.1、父组件
2.2、子组件（Child）
1、法一：通过defineEmits调用父组件方法
1.1、父组件
<el-dialog v-model="finish" :click=”click” width="600px" title="正在....."><CONTENT/>
</el-dialog>
const finish = ref(false);
const click = () => {finish.value = !finish.value;
}
打开dialog调用click即可。
1.2、子组件（CONTENT）
其中子组件模板内只需专注于内容展示即可，不需要使用el-dialog，
const emits = defineEmits(['click']);
const closeDialog = () => {emits('click');
};
关闭按钮绑定closeDialog即可。
2、法二：通过difineExpose暴露子组件属性
2.1、父组件
<Child ref="childRef">
const childRef = ref();
const openDialog = () => {childRef.value.dialogVisible = true
}
打开dialog调用openDialog即可。
2.2、子组件（Child）
el-dialog写在子组件的模板内，父组件不需要写，
<template>
<el-dialog v-model=" dialogVisible" @close="closeDialog"></el-dialog>
</template>
defineExpose({dialogVisible})
const closeDialog = () => {dialogVisible.value = false
}
其中dialogVisible暴露给父组件使其可以通过ref进行修改，关闭dialog调用closeDialog即可。
如果对你有帮助，点赞、收藏、关注是我更新的动力！
往期精彩：
#10外部网页跳转vue3+SpringMVC解码GBK编码的参数-CSDN博客文章浏览阅读2.1k次，点赞64次，收藏18次。外部网页跳转vue3页面解码GBK编码的参数问题（包括乱码、解码失败、无法进入页面、URI malformed等问题）
https://blog.csdn.net/weixin_42718399/article/details/135995885?spm=1001.2014.3001.5501#7注解+切面AOP+枚举类记录日志-CSDN博客文章浏览阅读597次，点赞22次，收藏8次。注解+切面AOP+枚举类记录日志
这篇关于#11vue3中使用el-dialog展示与关闭交由父组件控制的写法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
