#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+枚举类记录日志https://blog.csdn.net/weixin_42718399/article/details/135649201?spm=1001.2014.3001.5502#5解析filter为什么不能注入bean和解决办法以及filter、interceptor、aspect之间的执行顺序_filter 不能注入实体类-CSDN博客文章浏览阅读1.1k次,点赞38次,收藏7次。filter过滤器为什么不能注入bean以及解决办法_filter 不能注入实体类https://blog.csdn.net/weixin_42718399/article/details/135517565?spm=1001.2014.3001.5502#3Jenkins(Windows环境)版本升级、迁移、负载均衡、双机器同步与备份_job import plugin迁移-CSDN博客文章浏览阅读1k次,点赞28次,收藏17次。Jenkins(Windows环境)版本升级、迁移、负载均衡、双机器同步与备份_job import plugin迁移https://blog.csdn.net/weixin_42718399/article/details/135404525?spm=1001.2014.3001.5502#2Vite+Vue3+SpringMVC前后端分离 解决跨域问题和session每次请求不一致问题_vue3前后端分离跨域问题-CSDN博客文章浏览阅读1.1k次,点赞37次,收藏15次。Vite+Vue3+SpringMVC前后端分离通过vite/nginx解决跨域问题和session一致性问题_vue3前后端分离跨域问题https://blog.csdn.net/weixin_42718399/article/details/135388463?spm=1001.2014.3001.5502

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/687907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 Coze 搭建 TiDB 助手

导读 本文介绍了使用 Coze 平台搭建 TiDB 文档助手的过程。通过比较不同 AI Bot 平台&#xff0c;突出了 Coze 在插件能力和易用性方面的优势。文章深入讨论了实现原理&#xff0c;包括知识库、function call、embedding 模型等关键概念&#xff0c;最后成功演示了如何在 Coze…

Effective Objective-C 学习(四)

掌握GCD及操作队列的使用时机 在执行后台任务时&#xff0c;GCD 并不一定是最佳方式。还有一种技术叫做 NSOperationQueue&#xff0c;它虽然与 GCD 不同&#xff0c;但是却与之相关&#xff0c;开发者可以把操作以 NSOperation 子类的形式放在队列中&#xff0c;而这些操作也…

mysql like‘%xxx%‘优化

CREATE TABLE test (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50),INDEX idx_name (name) ) CHARACTER SET utf8; select * from test where name like %abc%; 常规优化 select * from test where name like abc% union select * from test where name like cba%; …

关于Windows中的DirectX的知识,看这篇文章就差不多了

DirectX是Windows中用于多媒体和视频程序的API集合,对游戏玩家尤其重要。DirectX诊断工具显示有关DirectX的丰富信息,还允许你在DirectX系统上执行基本诊断测试。如果你想检查你正在运行的DirectX版本,甚至输出一个充满诊断信息的文件以进行故障排除,下面是如何做到的。 D…

抖音抢到的福袋怎么用?抖音福袋怎么抢几率大?

一、抖音抢到的福袋怎么用 查看福袋内容&#xff1a;当用户在抖音中成功抢到福袋后&#xff0c;首先会在屏幕上看到福袋被成功领取的提示。随后&#xff0c;福袋的内容会显示在用户的抖音钱包或相关页面中。福袋的内容可能包括抖音币、优惠券、实物奖品等。 兑换或使用&#…

react中commit工作流程

整个React工作流程可以分为两大阶段&#xff1a; Render阶段 Schecule Reconcile Commit阶段 注意&#xff0c;Render阶段是在内存中运行的&#xff0c;这意味者可以被打断&#xff0c;而commit阶段一旦开始同步执行直到完成。 Renderer工作的阶段被称为commit阶段。commit阶…

开发知识点-JAVA-springboot+Spring Security/Shiro

Spring Security/Shiro shiroShiro反序列化相关URLDNS链Shiro CC链Shiro CB链Shiro反序列化WAF绕过Java快速开发框架_若依——前后端分离版- 3. 登陆 springsecurity认证 Debug - postman模拟SpringBoot+SpringSecurity+dubbo图书电商后台实战-对象映射-基本属性映射SpringBoot…

一连三部电影撤出春节档,给行业带来什么启示?

继《我们一起摇太阳》后&#xff0c;《红毯先生》于2月16日晚也宣布退出今年春节档。 至此&#xff0c;加上动画电影《黄貔&#xff1a;天降财神猫》&#xff0c;2024年春节档已有三部影片撤档&#xff0c;在春节档历届过往中实属少见。 其中&#xff0c;《红毯先生》、《我们…

【nginx实践连载-2】多应用安装部署

以下是基于端口差异的多应用安装部署&#xff0c;以备参考&#xff01; #demo1 server {listen 7000; #server_name XXXX.XXX.XXX.XXX; root /var/www/demo1; location /demo1{ index index.html index.htm default.htm default.html; try_files $uri $uri/…

【数据仓库】主题域和数据域

数据域与主题域区别 https://www.cnblogs.com/datadance/p/16898254.html 数据域是自下而上&#xff0c;以业务数据视角来划分数据&#xff0c;一般进行完业务系统数据调研之后就可以进行数据域的划分。针对公共明细层&#xff08;DWD&#xff09;进行主题划分。主题域则自上而…

《苍穹外卖》知识梳理6-缓存商品,购物车功能

苍穹外卖实操笔记六—缓存商品&#xff0c;购物车功能 一.缓存菜品 可以使用redis进行缓存&#xff1b;另外&#xff0c;在实现缓存套餐时可以使用spring cache提高开发效率&#xff1b;   通过缓存数据&#xff0c;降低访问数据库的次数&#xff1b; 使用的缓存逻辑&#…

ChatGPT的大致原理

国外有个博主写了一篇博文&#xff0c;名字叫TChatGPT: Explained to KidsQ」&#xff0c; 直译过来就是&#xff0c;给小孩子解释什么是ChatGPT。 因为现实是很多的小孩子已经可以用父母的手机版ChatGPT玩了 &#xff0c;ChatGPT几乎可以算得上无所不知&#xff0c;起码给小孩…

CDH 6.3.2集成Hudi异常org.codehaus.jackson不存在及开源JDK版本异常

CDH 6.3.2集成Hudi异常&#xff0c;首先获取hudi源码&#xff0c;地址&#xff1a;git clone https://github.com/apache/hudi.git&#xff0c;进入根目录hudi编译相关jar时&#xff0c;存在2个问题jar包依赖为导入和开源JDK版本问题。异常分别如下所示。 1.编译命令 到hudi根…

【漏洞复现-通达OA】通达OA share身份认证绕过漏洞

一、漏洞简介 通达OA(Office Anywhere网络智能办公系统)是中国通达公司的一套协同办公自动化软件。通达OA /share/handle.php存在一个认证绕过漏洞,利用该漏洞可以实现任意用户登录。攻击者可以通过构造恶意攻击代码,成功登录系统管理员账户,继而在系统后台上传恶意文件控…

微信小程序,一网打尽微信相关的面试题,总结篇

前言 无论是微信小程序、还是支付宝小程序或者是其他的小程序当你参与过项目你会发现它们都大同小异&#xff0c;所以彻底搞懂微信小程序相关的知识点&#xff0c;再去看其他的就很简单了。 本篇文章是我的专栏《面试题一网打尽》的系列文章之一&#xff0c;内容持续更新中&a…

哪种台灯的灯光适合学生用?明基/书客/松下等护眼台灯推荐

目前近视人群越来越多&#xff0c;并且有低龄化的倾向。针对护眼这一卖点&#xff0c;市面上出现了很多护眼台灯品牌&#xff0c;但是很多不知名的网红品牌生产出来的产品质量没有办法得到保障。在挑选护眼台灯时&#xff0c;还是要先做好攻略才不会踩雷。 一、使用护眼台灯更…

深入解析:二阶段目标检测算法流程详解

在计算机视觉领域&#xff0c;目标检测是一个核心任务。它不仅需要识别图像中的物体类别&#xff0c;还要精确地确定物体的位置和大小。为了实现这一目标&#xff0c;研究人员提出了多种目标检测算法。其中&#xff0c;二阶段目标检测算法因其较高的准确率而备受关注。本文将详…

openEuler 系统维护

修订记录 序号修订内容修订日期1新增20240218 零 摘要 本文主要介绍openEuler 系统常见维护 一 环境信息 1.1 操作系统 [rootlocalhost etc]# cat /etc/openEuler-release openEuler release 22.03 (LTS-SP3) [rootlocalhost etc]# 二 维护 2.1 配置dns

Stable Diffusion webui安装详细教程

上一篇文章介绍了sd主流的ui&#xff0c;相信大家已经有所了解&#xff0c;下面为大家介绍sd-webui的安装详细教程 文章目录 一、 安装包说明二、对电脑的要求三、安装文件介绍四、安装步骤五、电脑问题与云主机六、界面简要说明及通用反向提示词 一、 安装包说明 通常我们使…

14. Qt 程序菜单实现,基于QMainWindow

目录 前言&#xff1a; 技能&#xff1a; 内容&#xff1a; 一、ui中直接添加控件实现 二、 完全通过代码实现菜单 参考&#xff1a; 前言&#xff1a; 基于QMainWindow&#xff0c;两种方式实现菜单&#xff1a;通过直接添加ui控件快速添加菜单和完全通过代码实现菜单&a…