【Vue3 入门到实战】14. telePort 和 Suspense组件
目录
编辑
1. telePort
2. 异步组件Suspense
3. 总结
1. telePort
telePort 允许你将子组件渲染到 DOM 中的任何位置，而不仅仅是在其父组件的范围内。这对于模态框（modals）、提示框（tooltips）和其他需要脱离当前组件层次结构进行渲染的 UI 元素特别有用。
下面举个例子形象化说明一下。
创建一个包含模态框的子组件
Category.vue
<template><div><button @click="showModal = true">显示模态框</button><!-- 使用 Teleport 将内容渲染到 body 标签内 --><Teleport to="body"><div v-if="showModal" class="modal"><p>这是一个模态框</p><button @click="showModal = false">关闭</button></div></Teleport></div>
</template><script setup>
import { ref } from 'vue';const showModal = ref(false);
</script><style scoped>
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: red;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>在父组件中引用。并给父组件设置合适的范围。
Father.vue
<template><div class="father"><h2>父组件</h2><Category /></div>
</template>
<script setup>
import Category from './Category.vue';</script><style scoped>
.father{width: 220px;height: 200px;background-color: grey;border:1px solid red;
}
</style>如下图所示，即使模态框的逻辑和样式都定义在当前组件中，它的实际渲染位置是在整个页面的根节点下，避免了嵌套层级带来的布局问题。
2. Suspense
suspense 是一个用于处理异步依赖（如异步组件）的内置组件。它允许你在等待子组件加载时显示一个备用内容（fallback content），并在子组件准备好后切换到实际的内容。
下面准备一个效果，在子组件中进行异步请求，在父组件中使用Suspense，使子组件在加载时出现 `等待中` 的内容显示。
子组件Child.vue
<template><div>这里是子组件</div></template><script setup>
import axios from 'axios'let {data:{content}} = await axios.get('https://api.uomg.com/api/rand.qinghua')console.log(content)
</script><style scoped></style>父组件Father.vue
<template><div><h2>这里是父组件</h2><Suspense><template #default><Child/></template><template #fallback><div>加载中...</div></template></Suspense></div>
</template><script setup>
import { Suspense } from 'vue';
import Child from './Child.vue'</script>在控制台将网速调至3G，减缓请求速度，来看效果。
效果如下
3. 总结
<Teleport> 组件允许你将子组件的内容渲染到 DOM 树中的任意位置（如 <body> 标签内），而不局限于其父组件的范围，适用于模态框、提示框等需要脱离当前组件层次结构进行渲染的场景
<Suspense> 组件用于处理异步依赖（如异步组件），在异步组件加载期间显示备用内容，并在组件准备好后切换到实际内容，适用于需要动态加载数据或组件的应用场景。
这两者分别解决了组件渲染位置和异步加载状态管理的问题。
更多内容点击下方链接 ↓ ↓ ↓
Vue3入门到实战_借来一夜星光的博客-CSDN博客
相关文章：
【Vue3 入门到实战】14. telePort 和 Suspense组件
目录 编辑 1. telePort 2. 异步组件Suspense 3. 总结 1. telePort telePort 允许你将子组件渲染到 DOM 中的任何位置，而不仅仅是在其父组件的范围内。这对于模态框（modals）、提示框（tooltips）和其他需要脱…...
Golang的并发编程案例详解
Golang的并发编程案例详解 一、并发编程概述 并发编程是指程序中有多个独立的执行线索，并且这些线索在时间上是重叠的。在 Golang 中，并发是其核心特性之一，通过 goroutine 和 channel 来支持并发编程，使得程序可以更高效地利用计…...
IS-IS 泛洪机制 | LSP 处理流程
IS-IS 泛洪机制 作为一种链路状态路由协议，IS-IS 与 OSPF 类似，在学习和计算路由之前，区域中的路由器首先需交换链路状态信息，最终使所有路由器的链路状态数据库达到一致状态，这就如同每台路由器都拥有一张相同的网络…...
原型模式详解（Java）
原型模式（Prototype Pattern），作为一种极具代表性的创建型设计模式，其核心思想在于通过复制，亦即克隆现有的对象，来达成创建新对象的目的，而非依赖传统的构造函数途径。这一模式巧妙地基于现有对…...
内存条2R×4 2400和4R×4 2133的性能差异
内存条2R4 2400和4R4 2133的性能差异 2R4 2400 和 4R4 2133 是两种不同的内存条规格，主要在Rank数量和频率上有所不同，具体性能差异如下： 1. Rank数量 2R4：表示内存条有2个Rank，每个Rank有4个内存芯片。4R4ÿ…...
安装并配置 MySQL
MySQL 是世界上最流行的开源关系型数据库管理系统之一，因其高性能、可靠性和易用性而被广泛应用于各种规模的企业级应用中。本文将详细介绍如何在不同的操作系统上安装和配置 MySQL，帮助你快速搭建起一个功能完善的数据库环境。 选择适合你的安装方式 …...
常用的网络安全设备
一、 WAF 应用防火墙 范围：应用层防护软件 作用： 通过特征提取和分块检索技术进行模式匹配来达到过滤，分析，校验网络请求包的目的，在保证正常网络应用功能的同时，隔绝或者阻断无效或者非法的攻击请求 可…...
【蓝桥】线性DP--最快洗车时间
题目描述 解题思路 完整代码 举例 总结 基于 0/1 背包思想 解决 洗车时间分配问题，本质上是子集和问题【给定一个 正整数数组 nums 和一个目标值 target，判断是否可以从 nums 选择 若干个数（每个数最多选一次），使…...
Spring Boot比Spring多哪些注解？
Spring Boot 相比 Spring 多了很多自动化配置和简化开发的注解，主要包括以下几类： Spring Boot 启动与自动配置相关Spring Boot 配置相关Spring Boot Web 相关Spring Boot 测试相关Spring Boot 条件装配相关Spring Boot 监控与 Actuator 相关 1. Spring…...
springboot021校园周边美食探索及分享平台
版权声明 所有作品均为本人原创，提供参考学习使用，如需要源码数据库配套文档请移步 www.taobysj.com 搜索获取 技术实现 开发语言：Javavue。 框架：后端spingboot前端vue。 模式：B/S。 数据库：mysql。 开…...
【网络通信】传输层之UDP协议
【网络通信】传输层之UDP协议 传输层端对端通信实现端到端通信的关键技术 UDP协议再谈端口号端口号划分关于端口号的两个问题 UDP协议基本格式UDP通信的特点UDP的缓冲区UDP数据报的最大长度基于UDP的应用层协议如何封装UDP报文以及如何交付UDP报文进一步理解封装和解包 传输层 …...
Python环境搭建与量化交易开发：从基础到实战
Python环境搭建与量化交易开发：从基础到实战 在量化交易领域，Python因其强大的数据处理能力和丰富的库支持而成为首选编程语言。本文将指导您如何在本地搭建一个适合量化交易的Python环境，并介绍一些实用的工具和技巧。 《QMT开通规则分享》…...
软著申请（六）软著返修流程【2025年最新版】
软著申请（六）软著返修流程【2025年最新版】 一、软著返修流程1、软著返修流程须知2、相关细节二、针对大模型特殊补正条件三、备注本服务提供详细的软件著作权申请流程指导。申请人严格按照指导步骤完成申请，若最终未能成功获得著作权登记，可联系服务提供方进行免费咨询和指…...
SOUI基于Zint生成Code11码
Code 11 是一种高密度的数字条形码，主要用于标识电信设备和电子元件。它的名称来源于其能够编码 11 种字符：数字 0-9 和连接符 -。Code 11 是一种双向可读的条形码，支持校验位以提高数据准确性。 在使用BARCODE_CODE11码制生成code 11码时可指…...
sqlilabs第八关
?id1 and sleep(2)-- 发现页面存在注点，使用时间盲注脚本进行注入--- import requestsdef inject_database(url):name #name用于存储猜测出的数据库名称 for i in range(1, 20): # 假设数据库名称长度不超过20low 48 # 0high 122 # zmiddle (low high…...
基于HAL库的按钮实验
实验目的 掌握STM32 HAL库的GPIO输入配置方法。 实现通过按钮控制LED亮灭（支持轮询和中断两种模式）。 熟悉STM32CubeMX的外部中断（EXTI）配置流程。 实验硬件 开发板：STM32系列开发板（如STM32F103C8T6、N…...
DeepSeek 突然来袭，AI 大模型变革的危机与转机藏在哪？
随着人工智能技术的飞速发展，大模型领域不断涌现出具有创新性的成果。DeepSeek 的横空出世，为 AI 大模型领域带来了新的变革浪潮。本文将深入探讨 DeepSeek 出现后 AI 大模型面临的危机与转机。 冲冲冲！！！ 目录 一、…...
prompt技术结合大模型 生成测试用例
要利用prompt技术结合大模型对目标B/S架构软件系统进行测试，以下以使用Python调用OpenAI的GPT模型进行功能测试用例生成，再借助Selenium库执行测试为例，给出一个完整的实现示例。 前提条件 安装依赖库：你需要安装openai和selenium库，可以使用以下命令进行安装：pip insta…...
【C++ 真题】P2920 [USACO08NOV] Time Management S
P2920 [USACO08NOV] Time Management S 题目描述 Ever the maturing businessman, Farmer John realizes that he must manage his time effectively. He has N jobs conveniently numbered 1…N (1 < N < 1,000) to accomplish (like milking the cows, cleaning the …...
pip安装指定版本的包
个人博客地址：pip安装指定版本的包 | 一张假钞的真实世界 使用以下命令安装指定版本的包： # pip install pyspark2.3.3...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...