当前位置: 首页 > news >正文

vue3父子传值实现弹框功能

在Vue3中,我们可以通过 provideinject 来实现父子组件之间的数据传递,这也适用于实现弹框功能。下面是一个简单的例子:

父组件代码:

<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中,可以使用provideinject来实现父子组件之间的值传递。具体的实现步骤如下:

  1. 在父组件中使用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>

  1. 在子组件中使用inject来获取父组件传递的isShowModalopenModal。在子组件中,通过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>

  1. 根据需求自定义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中&#xff0c;我们可以通过 provide 和 inject 来实现父子组件之间的数据传递&#xff0c;这也适用于实现弹框功能。下面是一个简单的例子&#xff1a; 父组件代码&#xff1a; <template><div><button click"showDialog">打开弹框</b…...

C++入门【2-C++ 数据类型】

C 数据类型 使用编程语言进行编程时&#xff0c;需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着&#xff0c;当您创建一个变量时&#xff0c;就会在内存中保留一些空间。 您可能需要存储各种数据类型&#xff08;比如字符型、宽字符型、整型…...

按照官网文档 通过useExtendedLib扩展库 引入WeUI,报错 组件未定义 | 解决办法

检查开发者工具版本是否过老 参考博客 不要使用 游客模式&#xff0c;游客模式不支持&#xff0c;请注册Appid 使用。 注意 扩展库方式 和 npm 方式不能同时使用&#xff0c;会有相应报错...

Chat-GPT原理

Chat-GPT原理核心:基于Transformer 架构 ​ 以下是参考文献的部分截图原文说明&#xff1a; ​ 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程序设计语言》这本书&#xff0c;按照其中的内容&#xff0c;想看下GO自带的包的文档。 书中讲&#xff0c;可以直接输入GoDOC命令来打开一个服务器&#xff0c;从而可以用浏览器访问文档库。输入命令后&#xff0c;系统提示找不到该命令。 查了资料后才发现&#xff…...

忽略python运行出现的大量警告

添加以下代码即可 import warnings warnings.filterwarnings(ignore)...

【Polar靶场WEB签到】

题目&#xff1a; <?phperror_reporting(0);$file $_GET[file];if(!isset($file))$file 1;$file str_replace(../, , $file);include_once($file.".php");highlight_file(__FILE__); ?>解答&#xff1a;1、进入index页面&#xff0c;说让你加弟弟&#x…...

Linux详解——常用命令(二)

目录 一、常用命令 1.进程相关命令 2.vi命令 3.软件相关命令 RPM命令 YUM命令 4.用户和组相关命令 5.权限相关命令 一、常用命令 1.进程相关命令 # 1.ps 询在当前控制台上运行的进程 ps -aux 说明:查询系统中所有运行的进程&#xff0c;包括后台进程&#xff0c;其…...

TCP首部格式_基本知识

TCP首部格式 表格索引: 源端口目的端口 序号 确认号 数据偏移保留 ACK等 窗口检验和紧急指针 TCP报文段首部格式图 源端口与目的端口: 各占16位 序号:占32比特&#xff0c;取值范围0~232-1。当序号增加到最后一个时&#xff0c;下一个序号又回到0。用来指出本TCP报文段数据载…...

MIT线性代数笔记-第23讲-微分方程,exp(At)

目录 23.微分方程&#xff0c; e x p ( A t ) exp(At) exp(At)用矩阵求解微分方程矩阵指数二阶常微分方程 打赏 23.微分方程&#xff0c; e x p ( A t ) exp(At) exp(At) 用矩阵求解微分方程 例&#xff1a; { 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之前&#xff0c;通常需要先安装和配置ZooKeeper。ZooKeeper是Kafka的依赖项之一&#xff0c;它用于协调和管理Kafka集群的状态。 ZooKeeper是一个开源的分布式协调服务&#xff0c;它提供了可靠的数据存储和协调机制&#xff0c;用于协调分布式…...

TV遥控器模拟鼠标键

需求 &#xff1a; tv上部分app不支持光标选中&#xff0c;如亚马逊&#xff0c;插上鼠标不方便&#xff0c;即可以用遥控器模拟鼠标滚动和点击 1.拦截上下左右键 在WMS::PhoneWindowManager::interceptKeyBeforeQueueing中监听上下左右左右键&#xff0c;进行拦截。 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&#xff0c;全称为Simple Watcher&#xff0c;是一个简单的监视器&#xff0c;设计用于监控系统活动。为了使Swatch有用&#xff0c;它需要一个配置文件&#xff0c;该文件包含要查找的模式和在找到每个模式时要执行的操作。 Linux swatch命令适…...

加州大学伯克利分校研究人员推出Starling-7B:一款通过人工智能反馈强化学习(RLAIF)训练的开源大型语言模型(LLM)

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

腾讯面试真题(C语言)

一.题目 求123...n&#xff0c;要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句&#xff08;A?B:C&#xff09;。 二.题目剖析 首先题目要求不能用乘除&#xff0c;那么&#xff08;首相末项&#xff09;*项数/2就不能用&#xff0c;其次不…...

JavaScript 函数

JavaScript 函数 函数就是封装起来可以被重复使用的代码块 函数的优点 使代码更加简洁方便代码的修改和维护使程序运行更加高效 函数的封装(创建 声明)和调用 封装 通过function关键字封装 function 函数名(参数) {函数体:被封装的代码 }匿名函数 将一个函数直接赋值给一…...

数据结构 | 查漏补缺之DFS、BFS、二次探测再散列法、完全二叉树、深度计算

目录 DFS&BFS 哈希表-二次探测再散列法 完全二叉树&深度计算 排序 快速排序-挖坑法 插入、选择、冒泡、区别 DFS&BFS 哈希表-二次探测再散列法 完全二叉树&深度计算 排序 快速排序-挖坑法 插入、选择、冒泡、区别 插入从第一个元素开始&#xff0c…...

用python实现单链表的基础操作

1 问题 用python实现单链表的基础操作&#xff1a;插入&#xff0c;删除&#xff0c;遍历&#xff0c;判空&#xff0c;清空链表&#xff0c;求长度&#xff0c;获取元素&#xff0c;判断元素是否存在。 2 方法 解决问题的步骤采用如下方式&#xff1a; 使用函数和类的方法来实…...

[头歌系统数据库实验] 实验3 MySQL的DDL语言

目录 第1关&#xff1a;将P表中的所有红色零件的重量增加6 第2关&#xff1a;把P表中全部红色零件的颜色改成蓝色 第3关&#xff1a;将SPJ表中由S5供给J4的零件P6改为由S3供应 第4关&#xff1a;将SPJ表中所有天津供应商的QTY属性值减少11&#xff08;用子查询方式&#x…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...