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

news/2024/4/20 23:59:45/

目录

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.ppmy.cn/news/1360277.html

相关文章

PyTorch中保存模型的两种方式

文章目录 一、状态字典&#xff08;State Dictionary&#xff09;二、序列化模型&#xff08;Serialized Model&#xff09;三、示例代码 一、状态字典&#xff08;State Dictionary&#xff09; 这种保存形式将模型的参数保存为一个字典&#xff0c;其中包含了所有模型的权重…

“软件定义汽车”时代下的软件供应链安全

如今汽车产业智能化、网联化、电动化、共享化的“新四化”程度逐渐深入&#xff0c;“软件定义汽车”也被反复提及。以硬件主导的传统汽车演变为以软件主导、软硬解耦的新汽车。“中国亟需构建智能网联汽车安全可信的软件生态。”中国工程院院士沈昌祥此前曾表示&#xff0c;没…

有趣且重要的JS知识合集(19)前端实现图片的本地上传/截取/导出

input[file]太丑了&#xff0c;又不想去改button样式&#xff0c;那就自己实现一个上传按钮的div&#xff0c;然后点击此按钮时&#xff0c;去触发file上传的事件, 以下就是 原生js实现图片前端上传 并且按照最佳宽高比例展示图片&#xff0c;然后可以自定义截取图片&#xff0…

链表之“无头单向非循环链表”

目录 ​编辑 1.顺序表的问题及思考 2.链表 2.1链表的概念及结构 2.2无头单向非循环链表的实现 1.创建结构体 2.单链表打印 3.动态申请一个节点 3.单链表尾插 4.单链表头插 5.单链表尾删 6.单链表头删 7.单链表查找 8.单链表在pos位置之前插入x 9.单链表删除pos位…

一文了解LM317T的引脚介绍、参数解读

LM317T是一种线性稳压器件&#xff0c;它具有稳定输出电压的特性。LM317T可以通过调整其输出电阻来确保输出电压的稳定性&#xff0c;因此被广泛应用于各种电子设备中。 LM317T引脚图介绍 LM317T共有3个引脚&#xff0c;分别是&#xff1a; 输入引脚&#xff08;输入电压V_in&…

文本编辑器markdown语法

markdown语法 1.介绍 Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言&#xff0c;它的特点是可以使用普通的文本编辑器来编写&#xff0c;只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。 2.标题分级 "# " -> 一级标题 &…

[概念区分] 正则表达式与正则化

正则表达式与正则化 机器学习在计算机科学和数据处理领域&#xff0c;关于“正则”的两个术语&#xff1a;正则表达式和正则化&#xff0c;虽然它们在名称上非常相似&#xff0c;但实际上它们是完全不同的概念。 正则表达式 也被称为 regex&#xff0c;是一种强大的工具&…

RRT算法学习及MATLAB演示

文章目录 1 前言2 算法简介3 MATLAB实现3.1 定义地图3.2 绘制地图3.3 定义参数3.4 绘制起点和终点3.5 RRT算法3.5.1 代码3.5.2 效果3.5.3 代码解读 4 参考5 完整代码 1 前言 RRT&#xff08;Rapid Random Tree&#xff09;算法&#xff0c;即快速随机树算法&#xff0c;是LaVa…

基于qt的图书管理系统----03核心界面设计

参考b站&#xff1a;视频连接 源码github&#xff1a;github 目录 1 添加软件图标2 打包程序3 三个管理界面设计4 代码编写4.1 加载界面4.2 点击按钮切换界面4.3 组团添加样式4.4 搭建表头4.5 表格相关操作 从别人那里下载的项目会有这个文件&#xff0c;里边是别人配置的路径…

Android 圆环带刻度条进度动画效果实现

效果图 需求是根据传感器做一个重力球效果&#xff0c;先实现了动画后续加上跟传感器联动. 又是摆烂的一天&#xff0c; 尚能呼吸&#xff0c;未来可期啊 View源码 package com.android.circlescalebar.view;import android.content.Context; import android.content.res.Typ…

探索无限:Sora与AI视频模型的技术革命 - 开创未来视觉艺术的新篇章

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

【7】测试数据的读写(ARM服务器)

上一章节简单说了下测试项的编写,这一节,我们深入说一下如何编写测试项程序以及测试数据的读写,接下来一起来看一下。 一.环境配置 1.python 3.7.8 可直接进入官网下载安装:Download Python | Python.org 我们还是使用python来进行测试项程序的开发。 2.所需要的库如下…

【openGL教程08】着色器(02)

LearnOpenGL - Shaders 一、说明 着色器是openGL渲染的重要内容&#xff0c;客户如果想自我实现渲染灵活性&#xff0c;可以用着色器进行编程&#xff0c;这种程序小脚本被传送到GPU的显卡内部&#xff0c;起到动态灵活的着色作用。 二、着色器简述 正如“Hello Triangle”一章…

vue3中vue-pdf-embed实现放大、缩小、上一页、下一页、滚动翻页功能(pdf文件预览)

1.安装插件 npm install vue3-pdfjs npm install vue-pdf-embed 2.完整代码 <template><div class"pdf-wrap scrollbar-style"><vue-pdf-embed :source"state.source" v-if"state.pdfShow" :style"scaleFun" class&…

解决SSH远程登录开饭板出现密码错误问题

输入“adduser Zhanggong回车”&#xff0c;使用adduser命令创建开发板用户名为Zhanggong 输入密码“123456” 输入密码“123456”

petalinux_zynq7 驱动DAC以及ADC模块之一:建立IP

0. 环境 - ubuntu18 - vivado 2018.3 - mizar z7010 ada106模块 1. vivado 1.1 创建vivado工程 运行vivado source /tools/Xilinx/Vivado/2018.3/settings64.sh vivado& 创建vivado工程 Vivado -> Create Project -> Next -> -> Project name: …

Python 类型提示(Type Hinting)及typing库

目录 为什么要进行类型提示变量添加静态类型注释函数参数的类型注释**基本类型注释****基于`typing`库**其他高级用法注意事项特殊情况类引用自身实例作为形参时的类型注释参数要求为一个函数为什么要进行类型提示 从 Python 3.5 开始引入,类型提示允许程序员为变量、函数参数…

【Java EE初阶二十】http的简单理解(一)

1. 初识http HTTP 最新的版本应该是 HTTP/3.0&#xff0c;目前大规模使用的版本 HTTP/1.1&#xff1b; 下面来简单说明一下使用 HTTP 协议的场景: 1、浏览器打开网站 (基本上) 2、手机 APP 访问对应的服务器 (大概率) 前面的 TCP与UDP 和http不同&#xff0c;HTTP 的报文格式&a…

vue3中使用 tui-image-editor进行图片处理,并上传

效果图 下载包 pnpm i tui-image-editor pnpm i tui-color-picker调用组件 //html部分 <el-dialog v-model"imgshow" destroy-on-close width"40%" draggable align-center :show-close"true":close-on-click-modal"false">&l…

C语言特殊函数

静态函数 背景知识&#xff1a;普通函数都是跨文件可见的&#xff0c;即在文件 a.c 中定义的函数可以在 b.c 中使用。 静态函数&#xff1a;只能在定义的文件内可见的函数&#xff0c;称为静态函数。 语法 staitc void f(void) // 在函数头前面增加关键字 static &#xff…