#11vue3中使用el-dialog展示与关闭交由父组件控制的写法

火鸡nobug

已于 2024-09-04 13:52:48 修改

阅读量1.9k

点赞数 40

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2024-02-18 17:11:48 首次发布

本文链接：https://blog.csdn.net/weixin_42718399/article/details/136155379

版权

本文介绍了两种在Vue3中实现父组件控制子组件el-dialog显示与关闭的方法：1) 通过`defineEmits`调用父组件方法，2) 使用`defineExpose`暴露子组件属性。详细讲解了每个方法的父组件和子组件的实现细节，帮助开发者更好地理解和应用Vue3的组件通信。

摘要由CSDN通过智能技术生成

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)

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

火鸡nobug

关注关注

40
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）

王佳斌

03-20

3773

vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d

vue3 + el-dialog

weixin_39568072的博客

06-21

3311

vue3 + el-dialog

1 条评论您还未登录，请先登录后发表或查看评论

vue3父组件调用子组件el-dialog对话框

黄钢的博客

12-13

6858

在写项目的时候，经常要使用父子组件通讯，我已经写了很多篇博客来介绍父子组件通讯了，vue中的父子组件通讯方式有差不多10来种，最常用的就那么一两种，这里我介绍其中我认为最基础的两种。因为目标是在父组件中，通过点击按钮事件来打开子组件中的el-dialog对话框，所以比传统的父传子要复杂一点。

Vue3全局挂载Dialog组件

最新发布

ling08140814的博客

12-19

654

最近项目中遇到了全局挂载Dialog的需求，在这里记录一下，希望可以帮到大家。在main.js中进行全局挂载。

el-dialog作为子组件如何由父组件控制显示/隐藏

Prelude4的博客

03-28

2462

注意看调试窗口里面：当visible的值发生变化的时候，没有调用watch的函数，而是调用mounted函数。然后看了另外的文章，发现子组件不能直接更改props里面的数据，也不能直接进行v-model绑定。个人经验，如有错漏，欢迎指出。

vue3 el-dialog

weixin_60906876的博客

01-02

594

【代码】vue3 el-dialog。

父组件控制el-dialog展示关闭

AloneQi的博客

04-02

625

vue3、element-plus，父组件控制 el-dialog 对话框展示/关闭

Vue3 父组件控制子组件el-dialog对话框

MHQhaha的博客

04-23

2384

父组件：通过prop传参子组件：通过emits向子组件传参。父组件：通过prop传参。

vue3 element-plus dialog对话框组件化及双向绑定使用

zym434597594的博客

11-23

2343

话不多说上代码： 父组件 <template> <el-button @click="open">打开</el-button> <my-dialog ref="testDom" v-model:visible="flag"></my-dialog> </template> <script> import myDialog from "./myDialog.vue"; import { defineCompone

vue中el-dialog弹窗关闭，子组件控制父组件

liuyueyue1的博客

06-30

8167

1.父组件页面中的点击事件控制子组件的弹窗2.子组件页面有个叉叉，点了之后关闭当前页面初始化的时候recordVisible: false,点击事件的时true在父页面写子页面弹窗模块子组件页面的叉叉，点了之后，子组件会关闭，但是逻辑是点了叉叉之后，控制父组件的:visible.sync="recordVisible"，因为你是在父组件点击事件里面把他变成true，现在在子组件里面传给父组件一个recordVisible为false，子组件就关上了下面是子组件代码先接受父组件的:visib

vue封装el-dialog为公用组件时控制打开关闭的方法

VVVVV

10-23

1867

在我们封装的组件中加入变量visible与关闭函数 <el-dialog title="文件详情" :visible.sync="visible" :close-on-click-modal="false" @close="dialogClose" > //加入你要编写的内容 </el-dialog> export default { props: { dialogFlag: { defau.

vue3封装对话框el-dialog组件

Jolly_zhang的博客

03-19

1039

vue3封装对话框el-dialog组件

vue3中实现el-dialog弹窗

syl的博客

09-03

5878

vue3中实现el-dialog弹窗

Element-ui 中dialog的使用方法

weixin_30279671的博客

11-26

2034

<template> <div> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFormV...

Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息

huangfuyk.的博客

09-16

1564

Vue3+Element Plus：使用el-dialog，对话框可拖动，且对话框弹出时仍然能够在背景页（对话框外部的页面部分）上进行滚动以及输入框输入信息

Vue3控制模态框打开关闭的三种方法

Anorry的博客

07-03

4288

主要讲了实现控制子组件的模态框打开关闭的三种方法

【Vue3 + Element-Plus】 el-upload 组件批量上传图片问题记录

Komorebi_00的博客

06-07

1657

使用el-upload封装实现批量上传图片的组件时的踩坑记录，并附上完整组件代码

Vue3中函数式的弹窗Dialog控制

qq_55100815的博客

08-18

2062

vue函数式弹窗Dialog控制 h函数与render函数挂载虚拟dom

关于Vue3中，element-plus的el-dialog对话框无法显示的某一解决方法

xiaohuangmonkey的博客

07-08

1206

在Vue3+element-plus中使用官方的对话框代码无法弹出正常弹出对话框。

vue3使用element dialog弹窗组件

m0_46577631的博客

03-07

2832

【代码】vue3使用element dialog弹窗组件。