【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...
Blender 3MF插件终极指南：3D打印工作流的完整解决方案
Blender 3MF插件终极指南：3D打印工作流的完整解决方案 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 你是否正在寻找一个简单高效的3D打印文件处理方案&…...
自感痕迹论的思想史意义：一场发生学范式的四维跃迁
自感痕迹论的思想史意义：一场发生学范式的四维跃迁摘要在当代思想版图中，人文精神与科学技术正处于前所未有的割裂状态。一方面，现象学、后结构主义在解构了宏大叙事后，陷入相对主义与操作空转的泥淖；另一方面…...
高级技巧：利用SharpShooter实现COM Staging和应用程序白名单绕过
高级技巧：利用SharpShooter实现COM Staging和应用程序白名单绕过 【免费下载链接】SharpShooter Payload Generation Framework 项目地址: https://gitcode.com/gh_mirrors/sh/SharpShooter SharpShooter 是一款功能强大的Payload生成框架，专为安…...
Python 爬虫进阶技巧：内网公开资源合规爬虫采集
前言 在企业园区、高校校园、政务机关、科研机构等封闭网络环境中，普遍存在内网公开资源服务节点，这类资源仅对内网 IP 段开放访问权限，外网无法直接穿透接入，包含公开文档库、共享文件服务器、内部资讯公告、教学资源库、政务公…...
XUnity.AutoTranslator：打破语言障碍的Unity游戏实时翻译插件终极指南
XUnity.AutoTranslator：打破语言障碍的Unity游戏实时翻译插件终极指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 你是否曾经因为语言不通而错过心爱的外语游戏？是否对复杂的游…...
League Akari技术架构解析：基于LCU API的英雄联盟客户端自动化工具实现
League Akari技术架构解析：基于LCU API的英雄联盟客户端自动化工具实现 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League Aka…...
终极跨平台桌面待办工具：My-TODOs如何重塑你的任务管理体验
终极跨平台桌面待办工具：My-TODOs如何重塑你的任务管理体验 【免费下载链接】My-TODOs A cross-platform desktop To-Do list. 跨平台桌面待办小工具 项目地址: https://gitcode.com/gh_mirrors/my/My-TODOs 你是否厌倦了复杂的任务管理软件？是否…...
掌握Windows风扇控制：FanControl软件从零到精通指南
掌握Windows风扇控制：FanControl软件从零到精通指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/F…...
CAJ转PDF终极指南：3步告别知网格式限制，实现跨平台学术自由
CAJ转PDF终极指南：3步告别知网格式限制，实现跨平台学术自由 【免费下载链接】caj2pdf Convert CAJ (China Academic Journals) files to PDF. 转换中国知网 CAJ 格式文献为 PDF。佛系转换，成功与否，皆是玄学。 项目地址: https:…...
2026.5.11：2026年5月TIOBE指数
2026年5月TIOBE指数 2026年5月TIOBE指数 五月头条：统计编程语言市场正在经历重大整合 本月，R 编程语言在 TIOBE 指数中再次攀升至第八位，追平了历史最高排名。这并非偶然。统计编程语言市场显然正在经历一场重大整合。Python 和 R 成为最大的赢家，而许多老牌语言则持续失去…...