当前位置: 首页 > 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…...

如何突破分子观察瓶颈?PyMOL开源版的3大核心优势

如何突破分子观察瓶颈&#xff1f;PyMOL开源版的3大核心优势 【免费下载链接】pymol-open-source Open-source foundation of the user-sponsored PyMOL molecular visualization system. 项目地址: https://gitcode.com/gh_mirrors/py/pymol-open-source PyMOL开源版作…...

OpenClaw成本优化方案:ollama GLM-4-7-Flash替代OpenAI API实测

OpenClaw成本优化方案&#xff1a;ollama GLM-4-7-Flash替代OpenAI API实测 1. 为什么需要寻找OpenAI API的替代方案 去年我开始在个人项目中使用OpenClaw实现自动化办公流程时&#xff0c;很快被OpenAI API的token消耗速度震惊了。一个简单的"读取邮件附件-解析内容-生…...

泛微OA Ecology 安全补丁管理账号配置与实战

1. 泛微OA Ecology安全补丁管理账号配置详解 第一次接触泛微OA Ecology系统的安全补丁管理功能时&#xff0c;我完全没意识到这个看似简单的配置背后藏着这么多门道。直到有次系统被恶意攻击&#xff0c;才发现默认的管理账号存在安全隐患。今天就带大家彻底搞懂这个关键配置&a…...

从理论到实践:SUNFLOWER MATCH LAB中的Transformer架构详解

从理论到实践&#xff1a;SUNFLOWER MATCH LAB中的Transformer架构详解 如果你对AI图像识别&#xff0c;特别是植物识别感兴趣&#xff0c;可能听说过一些模型背后神秘的“Transformer”架构。它听起来很高深&#xff0c;像是只属于研究论文里的东西。但今天&#xff0c;咱们不…...

从CUDA核心到Tensor Core:GPU计算单元的演进与实战解析

1. CUDA核心&#xff1a;通用计算的基石 我第一次接触CUDA核心是在2012年做图像处理项目时。当时用GTX 680显卡做图像渲染&#xff0c;发现它比CPU快了近20倍&#xff0c;这个性能差距让我震惊。后来才知道&#xff0c;这要归功于显卡里密密麻麻的CUDA核心。 CUDA核心本质上就是…...

爱毕业aibye精选6大AI论文平台榜单:助力高效写作与智能降重,科研工作者的得力助手!

工具名称 核心功能 特色优势 Aibiye 论文生成降AI率 全学科覆盖、仿写优化、自动图表生成 Aicheck AI检测文献综述辅助 精准查新、3分钟高效成文 GPT学术版 润色/翻译/代码解释 多模型协同、PDF深度解析 摆平论文 大纲生成降重改写 三步出稿、本硕博通用 QuillB…...

校园网免认证上网?手把手教你用UDP53端口搭建自己的“网络后门”(附服务器配置)

校园网络优化&#xff1a;UDP53端口的高效应用实践 校园网络作为师生日常学习生活的重要基础设施&#xff0c;其稳定性和访问效率直接影响着教学科研活动的开展。本文将深入探讨一种基于UDP53端口的网络优化方案&#xff0c;帮助技术爱好者理解并实现更流畅的网络体验。 1. 校园…...

CentOS7快速部署Golang 1.22.2开发环境全攻略

1. 为什么选择CentOS7部署Golang 1.22.2 最近在帮团队搭建新的开发环境时&#xff0c;我发现很多同事还在用老旧的Golang版本。作为目前最稳定的Linux发行版之一&#xff0c;CentOS7依然是企业级开发环境的首选。而Golang 1.22.2作为2024年发布的最新稳定版&#xff0c;带来了不…...

SEO_从基础到精通,系统学习SEO的完整路径解析

<h2>SEO的基础&#xff1a;了解搜索引擎优化的核心概念</h2> <p>搜索引擎优化&#xff08;SEO&#xff09;是一个广泛且复杂的领域&#xff0c;它的核心在于提升网站在搜索引擎结果页面&#xff08;SERP&#xff09;中的自然排名。了解SEO的基础概念是每一个…...

# Kafka 消息队列实战指南

大数据开发核心技能&#xff1a;Kafka 架构原理、生产者消费者配置、Spark/Flink 集成、消息积压处理、数据一致性保障、生产环境案例&#xff0c;从 0 到 1 掌握企业级消息队列&#x1f4cc; 前言 真实生产问题 问题场景&#xff1a; 某电商公司数据平台遇到的问题&#xff1a…...