vue3父子传值实现弹框功能
在Vue3中,我们可以通过 provide 和 inject 来实现父子组件之间的数据传递,这也适用于实现弹框功能。下面是一个简单的例子:
父组件代码:
<template><div><button @click="showDialog">打开弹框</button><my-dialog :visible="dialogVisible" @close="handleDialogClose"><!-- 弹框内容 --></my-dialog></div>
</template><script>
import MyDialog from './MyDialog.vue'export default {components: {MyDialog},data() {return {dialogVisible: false}},methods: {showDialog() {this.dialogVisible = true},handleDialogClose() {this.dialogVisible = false}}
}
</script>
在父组件中,我们定义了一个 dialogVisible 变量来控制弹框的显示与隐藏,以及对应的方法来打开和关闭弹框。同时,我们将要展示的弹框作为父组件的子组件嵌入到模板中,并将 visible 属性绑定到 dialogVisible 变量上,这样在弹框中也可以使用它来控制弹框的显示与隐藏。
子组件代码:
<template><div v-if="visible"><div class="dialog-overlay" @click="close"></div><div class="dialog-content"><slot></slot></div></div>
</template><script>
export default {props: {visible: {type: Boolean,default: false}},inject: ['close'],mounted() {document.body.style.overflow = 'hidden'},beforeUnmount() {document.body.style.overflow = ''}
}
</script>
在子组件中,我们定义了一个 visible 属性来控制该弹框的显示与隐藏。同时,我们使用了 inject 来注入父组件中定义的 close 方法,这样在子组件中就可以调用该方法来关闭弹框。在弹框的模板中,我们使用了 slot 来插入具体的弹框内容,而弹框的样式可以通过 CSS 进行控制。
至此,我们就成功地实现了一个简单的弹框功能。当然,这只是一个简单的示例,实际上我们还可以通过传递参数,定制弹框的样式和行为等方式来进一步丰富弹框功能。
第二种方法
在Vue3中,可以使用provide和inject来实现父子组件之间的值传递。具体的实现步骤如下:
- 在父组件中使用
provide来提供一个方法,该方法将会被传递给子组件。在该provide方法中,通过ref来创建一个响应式状态isShowModal,用于控制弹框的显示和隐藏。
// 父组件
<template><div><button @click="openModal">打开弹框</button><ChildComponent /></div>
</template><script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},setup() {const isShowModal = ref(false);const openModal = () => {isShowModal.value = true;};provide('openModal', openModal);provide('isShowModal', isShowModal);},
};
</script>
- 在子组件中使用
inject来获取父组件传递的isShowModal和openModal。在子组件中,通过watch监听isShowModal的变化,从而控制弹框的显示和隐藏。
// 子组件
<template><div><Modal :visible="isShowModal" /></div>
</template><script>
import { inject, watch } from 'vue';
import Modal from './Modal.vue';export default {components: {Modal,},setup() {const isShowModal = inject('isShowModal');const openModal = inject('openModal');watch(isShowModal, (newVal) => {if (newVal) {Modal.open({title: '提示',content: '这是一个弹框',onOk: () => {isShowModal.value = false;},});} else {Modal.close();}});},
};
</script>
- 根据需求自定义
Modal组件,实现弹框的显示和隐藏逻辑。
// Modal.vue
<template><div v-show="visible" class="modal"><div class="modal-mask"></div><div class="modal-wrapper"><div class="modal-content"><div class="modal-header"><slot name="header"></slot><span class="modal-close" @click="handleClose">×</span></div><div class="modal-body"><slot name="content"></slot></div><div class="modal-footer"><slot name="footer"></slot></div></div></div></div>
</template><script>
import { ref } from 'vue';const MODAL_CONTAINER_CLASSNAME = 'modal-container';export default {props: {visible: {type: Boolean,default: false,},},setup(props) {const modalContainer = ref(null);const handleClose = () => {props.onClose && props.onClose();};const transitionEndHandler = () => {if (!props.visible) {modalContainer.value.classList.remove(MODAL_CONTAINER_CLASSNAME);}};const open = ({ title, content, onOk, onCancel }) => {props.onOpen && props.onOpen();modalContainer.value.classList.add(MODAL_CONTAINER_CLASSNAME);};const close = () => {props.onClose && props.onClose();};return {handleClose,open,close,};},
};
</script>
通过以上的实现,即可在Vue3中实现父子组件之间的弹框功能。
相关文章:
vue3父子传值实现弹框功能
在Vue3中,我们可以通过 provide 和 inject 来实现父子组件之间的数据传递,这也适用于实现弹框功能。下面是一个简单的例子: 父组件代码: <template><div><button click"showDialog">打开弹框</b…...
C++入门【2-C++ 数据类型】
C 数据类型 使用编程语言进行编程时,需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着,当您创建一个变量时,就会在内存中保留一些空间。 您可能需要存储各种数据类型(比如字符型、宽字符型、整型…...
按照官网文档 通过useExtendedLib扩展库 引入WeUI,报错 组件未定义 | 解决办法
检查开发者工具版本是否过老 参考博客 不要使用 游客模式,游客模式不支持,请注册Appid 使用。 注意 扩展库方式 和 npm 方式不能同时使用,会有相应报错...
Chat-GPT原理
Chat-GPT原理核心:基于Transformer 架构 以下是参考文献的部分截图原文说明: Transformers are based on the “attention mechanism,” which allows the model to pay more attention to some inputs than others, regardless of where they show up in t…...
GODOC命令无效,原因是需要手动安装
在看《GO程序设计语言》这本书,按照其中的内容,想看下GO自带的包的文档。 书中讲,可以直接输入GoDOC命令来打开一个服务器,从而可以用浏览器访问文档库。输入命令后,系统提示找不到该命令。 查了资料后才发现ÿ…...
忽略python运行出现的大量警告
添加以下代码即可 import warnings warnings.filterwarnings(ignore)...
【Polar靶场WEB签到】
题目: <?phperror_reporting(0);$file $_GET[file];if(!isset($file))$file 1;$file str_replace(../, , $file);include_once($file.".php");highlight_file(__FILE__); ?>解答:1、进入index页面,说让你加弟弟&#x…...
Linux详解——常用命令(二)
目录 一、常用命令 1.进程相关命令 2.vi命令 3.软件相关命令 RPM命令 YUM命令 4.用户和组相关命令 5.权限相关命令 一、常用命令 1.进程相关命令 # 1.ps 询在当前控制台上运行的进程 ps -aux 说明:查询系统中所有运行的进程,包括后台进程,其…...
TCP首部格式_基本知识
TCP首部格式 表格索引: 源端口目的端口 序号 确认号 数据偏移保留 ACK等 窗口检验和紧急指针 TCP报文段首部格式图 源端口与目的端口: 各占16位 序号:占32比特,取值范围0~232-1。当序号增加到最后一个时,下一个序号又回到0。用来指出本TCP报文段数据载…...
MIT线性代数笔记-第23讲-微分方程,exp(At)
目录 23.微分方程, e x p ( A t ) exp(At) exp(At)用矩阵求解微分方程矩阵指数二阶常微分方程 打赏 23.微分方程, e x p ( A t ) exp(At) exp(At) 用矩阵求解微分方程 例: { d u 1 d t − u 1 2 u 2 d u 2 d t u 1 − 2 u 2 \left \{ \b…...
windows下安装配置kafka
一、安装zookeeper 在使用Kafka之前,通常需要先安装和配置ZooKeeper。ZooKeeper是Kafka的依赖项之一,它用于协调和管理Kafka集群的状态。 ZooKeeper是一个开源的分布式协调服务,它提供了可靠的数据存储和协调机制,用于协调分布式…...
TV遥控器模拟鼠标键
需求 : tv上部分app不支持光标选中,如亚马逊,插上鼠标不方便,即可以用遥控器模拟鼠标滚动和点击 1.拦截上下左右键 在WMS::PhoneWindowManager::interceptKeyBeforeQueueing中监听上下左右左右键,进行拦截。 Overrid…...
检测判断IP合法性API接口
检测判断IP合法性API接口 一、检测判断IP合法性API接口二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 四、重要说明 一、检测判断IP合法性API接口 一款免费的帮助你检测判断IP合法性API接口 二、…...
Linux swatch命令教程:如何监控系统活动(附案例详解和注意事项)
Linux swatch命令介绍 Swatch,全称为Simple Watcher,是一个简单的监视器,设计用于监控系统活动。为了使Swatch有用,它需要一个配置文件,该文件包含要查找的模式和在找到每个模式时要执行的操作。 Linux swatch命令适…...
加州大学伯克利分校研究人员推出Starling-7B:一款通过人工智能反馈强化学习(RLAIF)训练的开源大型语言模型(LLM)
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
腾讯面试真题(C语言)
一.题目 求123...n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。 二.题目剖析 首先题目要求不能用乘除,那么(首相末项)*项数/2就不能用,其次不…...
JavaScript 函数
JavaScript 函数 函数就是封装起来可以被重复使用的代码块 函数的优点 使代码更加简洁方便代码的修改和维护使程序运行更加高效 函数的封装(创建 声明)和调用 封装 通过function关键字封装 function 函数名(参数) {函数体:被封装的代码 }匿名函数 将一个函数直接赋值给一…...
数据结构 | 查漏补缺之DFS、BFS、二次探测再散列法、完全二叉树、深度计算
目录 DFS&BFS 哈希表-二次探测再散列法 完全二叉树&深度计算 排序 快速排序-挖坑法 插入、选择、冒泡、区别 DFS&BFS 哈希表-二次探测再散列法 完全二叉树&深度计算 排序 快速排序-挖坑法 插入、选择、冒泡、区别 插入从第一个元素开始,…...
用python实现单链表的基础操作
1 问题 用python实现单链表的基础操作:插入,删除,遍历,判空,清空链表,求长度,获取元素,判断元素是否存在。 2 方法 解决问题的步骤采用如下方式: 使用函数和类的方法来实…...
[头歌系统数据库实验] 实验3 MySQL的DDL语言
目录 第1关:将P表中的所有红色零件的重量增加6 第2关:把P表中全部红色零件的颜色改成蓝色 第3关:将SPJ表中由S5供给J4的零件P6改为由S3供应 第4关:将SPJ表中所有天津供应商的QTY属性值减少11(用子查询方式&#x…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
前端高频面试题2:浏览器/计算机网络
本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…...
MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...
