Vue3 函数式弹窗优化

背景

前面文章介绍了如何使用 函数式弹窗,弹窗方式是挂载在了全局,使用了getCurrentInstance方法拿到了全局上下文,进而拿到挂载的dialog进行弹窗操作。getCurrentInstance现在已被官方Vue API隐藏,为内部使用函数,现API已经无法搜索到此方法,尤大也做了解释。

在这里插入图片描述
在这里插入图片描述
那么可能在后续vue更新中getCurrentInstance会被弃用,所以需要将此方法替换掉。

Vue3 Provide / Inject

  • Vue3提供透传的API Provide / Inject 如组件A下有B C D等子组件,且B C D中又其他子组件,这时可以使用Provide / Inject在顶层组件A中进行透传数据,A下面的所有组件可以拿到该数据。

优化函数式弹窗

  • 在main.ts中改造:
// 引入函数式弹窗
import Dialog from "@/plugins/dialog";// 将函数式弹窗全局透传
app.provide("$dialog", Dialog);
  • 如何调用:
// 拿到全局透传过来的dialog
const dialog = inject("$dialog") as Function;// 使用 这里与背景文档几乎相同
dialog( 组件, { 参数 } ).then();

补充

在弹窗内无法感知Vue全局信息,如全局引入的第三方UI,路由等,或者你想在弹窗中再次使用弹窗,发现透传拿不到。函数式弹窗文章中也说了这些问题,这时可以在创建弹窗时,将这些全局信息以参数形式往弹窗中传递,弹窗中以props拿参数的形式使用。需要改造创建弹窗的方法:

在创建弹窗时,引入这些全局信息,如弹窗函数(参考 函数式弹窗文章)。

import Dialog from "@/plugins/dialog";// createDialog中的参数options将弹窗也作为参数传递
const vNode = h(component, {// 改造这里...{...options,...{ dialog: Dialog }}
});

此时如要在弹窗中再次弹窗,只需要props接收dialog这个函数参数即可,eg.

// props接收dialog
const props = withDefaults(defineProps<{dialog?: Function;}>(),{}
);// 使用
props.dialog( 组件, { 参数 } ).then();

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

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

相关文章

20240202在Ubuntu20.04.6下配置环境变量之后让nvcc --version显示正常

20240202在Ubuntu20.04.6下配置环境变量之后让nvcc --version显示正常 2024/2/2 20:19 在Ubuntu20.04.6下编译whiper.cpp的显卡模式的时候&#xff0c;报告nvcc异常了&#xff01; 百度&#xff1a;nvcc -v nvidia-cuda-toolkit rootrootrootroot-X99-Turbo:~/whisper.cpp$ WH…

ARM架构可视化ROS消息方案部署

ARM架构可视化ROS消息方案部署 三种方案, 1. webviz 2. foxglove 3. rosviz 注: web要用firefox, chromimum用不了, 可能是因为取消了时间同步机制的原因 先说三种方案的优劣, webviz 延迟比较高, 但是部署相对简单, foxglove 部署比较费劲, 但是效果不错, 延迟低, 本文会尽…

常见的企业网络问题及SD-WAN解决方案

现在办公都离不开网络&#xff0c;网络问题的解决是企业高效办公的必要条件。目前SD-WAN组网是很多企业会选择的网络解决方案。那么SD-WAN好在哪&#xff1f;可以帮助企业解决哪些用网难题呢&#xff1f; 一.解决网络性能不佳问题 当您的WAN受到压力时&#xff0c;数据包开始下…

Swagger学习使用

swagger升级导致访问ui页面地址不一样 方式一 依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.3.RELEASE</version> </parent> <dependen…

FUXA远程命令执行漏洞(CVE-2023-33831)

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

C++弹球游戏:Jump Ball Game

一、下载压缩包 请查看网站C弹球游戏&#xff1a;Jump Ball Game并且下载&#xff0c;可以看到如下界面&#xff1a; 二、匹配图标 把压缩包解压了&#xff1a; 右键点击Jump Ball Game.lnk&#xff0c;点击“属性”它将会是我们要运行的文件。 点击“更改图标”&#xff0c;选…

集合问题(并查集)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例1&#xff1a; 输入 4 5 9 2 3 4 5 输出 YES 0 0 1 1 样例2&#xff1a; 输入 3 3 4 1 2 4 输出 NO 思路&#xff1a; 这道题关键点在于。 当集合中有一个元素均存在于集合 A 和集合 B 的时…

嵌入式学习步骤

嵌入式行业是一个涉及广泛领域的行业&#xff0c;嵌入式、物联网、人工智能、智能与科学、电子信息工程、通信工程、自动化工程、测控、计算机科学等专业在嵌入式系统中使得软件和硬件的结合更加高效&#xff0c;适合从事嵌入式物联网开发。 嵌入式学习步骤总结如下&#xff1a…

将有逻辑关系的树形结构数组转换为扁平化的一维对象数组(包含PID、ID父子关系)(tree转换为List)

// 将有逻辑关系的树形结构数组转换为扁平化的一维对象数组 treeStructure2flatArray(arr) {let r [], r_ (ar, PID root) > ar.forEach(v > (v.children && (r_(v.children, v.ID), delete v.children), (v.PID PID, r.push(v))));r_(JSON.parse(JSON.strin…

2.2日总结

第一题&#xff1a;搭配购买 题解&#xff1a;一看就是很普通的01背包问题&#xff0c;但是和查并集一起考了&#xff0c;首先我们需要把每个有联系的链接起来&#xff0c;形成一个大背包&#xff0c;用来装他们的总金额和总价值&#xff0c;然后我们在看一个个的物品进行取或者…

LeetCode.2670. 找出不同元素数目差数组

题目 题目链接 分析 一种暴力的方法&#xff0c;枚举数组所有数字&#xff0c;分别计算当前元素前面不同的元素和后面不同的元素&#xff0c;然后相减即可。这样的话太暴力&#xff0c;前缀和后缀也需要分别遍历&#xff1a;O(N*2)了。 我们来优化一下&#xff1a; 根据这种…

STM32F407移植OpenHarmony笔记8

继上一篇笔记&#xff0c;成功开启了littlefs文件系统&#xff0c;能读写FLASH上的文件了。 今天继续研究网络功能&#xff0c;让控制台的ping命令能工作。 轻量级系统使用的是liteos_m内核lwip协议栈实现网络功能&#xff0c;需要进行配置开启lwip支持。 lwip的移植分为两部分…

Paper - 预测异源多聚体相互作用 Effective Virial Coefficient (有效节流系数) 算法

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135974780 论文&#xff1a;Predicting heteropolymer interactions: demixing and hypermixing of disordered protein sequences 预测异聚物相…

Mysql的BufferPool

Mysql的BufferPool Mysql是一个存储数据到磁盘的进程&#xff0c;但是磁盘的速度难以与CPU相比&#xff0c;所以InnoDB存储引擎在处理客户端的请求时&#xff0c;当需要访问某个页的数据时&#xff0c;就会把完整的页的数据全部加载到内存中。将整个页加载到内存中后就可以进行…

Vue3_基础使用_1

这节主要介绍&#xff1a; vue2与vue3的区别&#xff0c;创建响应式的数据&#xff0c;setup语法糖的使用&#xff0c;watch监听&#xff0c;及vue3创建项目。 vue2的选项式与vue3的组合式区别&#xff1a; 选项式&#xff1a;vue2中数据与方法计算属性等等&#xff0c;针对…

TryHackMe-Valley

靶场介绍 Boot the box and find a way in to escalate all the way to root! 启动盒子&#xff0c;找到一种方法&#xff0c;一路升级到root&#xff01; 信息收集&端口利用 使用nmap对靶机进行扫描 nmap 10.10.138.189开放22、80和37370端口&#xff0c;先访问80端口查…

Facebook未来展望:社交媒体的下一个篇章

社交媒体一直是连接人与人之间的纽带&#xff0c;而Facebook则一直在推动这一领域的发展。随着科技不断演进和社会需求的不断变迁&#xff0c;Facebook正积极筹谋社交媒体的下一个篇章。本文将深入剖析Facebook的未来展望&#xff0c;探讨其在社交媒体领域所迎接的新时代。 1. …

【开源】SpringBoot框架开发农村物流配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统登录、注册界面2.2 系统功能2.2.1 快递信息管理&#xff1a;2.2.2 位置信息管理&#xff1a;2.2.3 配送人员分配&#xff1a;2.2.4 路线规划&#xff1a;2.2.5 个人中心&#xff1a;2.2.6 退换快递处理&#xff1a;…

【c语言】strcpy()和strncpy():字符串复制详解

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;c语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&a…

TryHackMe-File Inclusion练习

本文相关的TryHackMe实验房间链接&#xff1a;TryHackMe | Why Subscribe 路径遍历(目录遍历) LocationDescription/etc/issue包含要在登录提示之前打印的消息或系统标识。/etc/profile控制系统范围的默认变量&#xff0c;例如导出&#xff08;Export&#xff09;变量、文件创…