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

【Vue3 入门到实战】14. telePort 和 Suspense组件

news 2026/2/8 19:35:42

 

目录

​编辑

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 中的任何位置&#xff0c;而不仅仅是在其父组件的范围内。这对于模态框&#xff08;modals&#xff09;、提示框&#xff08;tooltips&#xff09;和其他需要脱…...

编程日记 2025/2/14 13:13:57

Golang的并发编程案例详解

Golang的并发编程案例详解 一、并发编程概述 并发编程是指程序中有多个独立的执行线索&#xff0c;并且这些线索在时间上是重叠的。在 Golang 中&#xff0c;并发是其核心特性之一&#xff0c;通过 goroutine 和 channel 来支持并发编程&#xff0c;使得程序可以更高效地利用计…...

编程日记 2025/2/14 13:09:49

IS-IS 泛洪机制 | LSP 处理流程

IS-IS 泛洪机制 作为一种链路状态路由协议&#xff0c;IS-IS 与 OSPF 类似&#xff0c;在学习和计算路由之前&#xff0c;区域中的路由器首先需交换链路状态信息&#xff0c;最终使所有路由器的链路状态数据库达到一致状态&#xff0c;这就如同每台路由器都拥有一张相同的网络…...

编程日记 2025/2/14 13:06:43

原型模式详解（Java）

原型模式&#xff08;Prototype Pattern&#xff09;&#xff0c;作为一种极具代表性的创建型设计模式&#xff0c;其核心思想在于通过复制&#xff0c;亦即克隆现有的对象&#xff0c;来达成创建新对象的目的&#xff0c;而非依赖传统的构造函数途径。这一模式巧妙地基于现有对…...

编程日记 2025/2/14 13:05:40

内存条2R×4 2400和4R×4 2133的性能差异

内存条2R4 2400和4R4 2133的性能差异 2R4 2400 和 4R4 2133 是两种不同的内存条规格&#xff0c;主要在Rank数量和频率上有所不同&#xff0c;具体性能差异如下&#xff1a; 1. Rank数量 2R4&#xff1a;表示内存条有2个Rank&#xff0c;每个Rank有4个内存芯片。4R4&#xff…...

编程日记 2025/2/14 13:03:37

安装并配置 MySQL

MySQL 是世界上最流行的开源关系型数据库管理系统之一&#xff0c;因其高性能、可靠性和易用性而被广泛应用于各种规模的企业级应用中。本文将详细介绍如何在不同的操作系统上安装和配置 MySQL&#xff0c;帮助你快速搭建起一个功能完善的数据库环境。 选择适合你的安装方式 …...

编程日记 2025/2/14 13:01:29

常用的网络安全设备

一、 WAF 应用防火墙 范围&#xff1a;应用层防护软件 作用&#xff1a; 通过特征提取和分块检索技术进行模式匹配来达到过滤&#xff0c;分析&#xff0c;校验网络请求包的目的&#xff0c;在保证正常网络应用功能的同时&#xff0c;隔绝或者阻断无效或者非法的攻击请求 可…...

编程日记 2025/2/14 13:00:26

【蓝桥】线性DP--最快洗车时间

题目描述​ 解题思路 完整代码 举例 总结 基于 0/1 背包思想 解决 洗车时间分配问题&#xff0c;本质上是子集和问题【给定一个 正整数数组 nums 和一个目标值 target&#xff0c;判断是否可以从 nums 选择 若干个数&#xff08;每个数最多选一次&#xff09;&#xff0c;使…...

编程日记 2025/2/14 12:59:24

Spring Boot比Spring多哪些注解？

Spring Boot 相比 Spring 多了很多自动化配置和简化开发的注解&#xff0c;主要包括以下几类&#xff1a; Spring Boot 启动与自动配置相关Spring Boot 配置相关Spring Boot Web 相关Spring Boot 测试相关Spring Boot 条件装配相关Spring Boot 监控与 Actuator 相关 1. Spring…...

编程日记 2025/2/14 12:56:18

springboot021校园周边美食探索及分享平台

版权声明 所有作品均为本人原创&#xff0c;提供参考学习使用&#xff0c;如需要源码数据库配套文档请移步 www.taobysj.com 搜索获取 技术实现 开发语言&#xff1a;Javavue。 框架&#xff1a;后端spingboot前端vue。 模式&#xff1a;B/S。 数据库&#xff1a;mysql。 开…...

编程日记 2025/2/14 12:51:13

【网络通信】传输层之UDP协议

【网络通信】传输层之UDP协议 传输层端对端通信实现端到端通信的关键技术 UDP协议再谈端口号端口号划分关于端口号的两个问题 UDP协议基本格式UDP通信的特点UDP的缓冲区UDP数据报的最大长度基于UDP的应用层协议如何封装UDP报文以及如何交付UDP报文进一步理解封装和解包 传输层 …...

编程日记 2025/2/14 12:50:09

Python环境搭建与量化交易开发：从基础到实战

Python环境搭建与量化交易开发&#xff1a;从基础到实战 在量化交易领域&#xff0c;Python因其强大的数据处理能力和丰富的库支持而成为首选编程语言。本文将指导您如何在本地搭建一个适合量化交易的Python环境&#xff0c;并介绍一些实用的工具和技巧。 《QMT开通规则分享》…...

编程日记 2025/2/14 12:48:59

软著申请（六）软著返修流程【2025年最新版】

软著申请（六）软著返修流程【2025年最新版】 一、软著返修流程1、软著返修流程须知2、相关细节二、针对大模型特殊补正条件三、备注本服务提供详细的软件著作权申请流程指导。申请人严格按照指导步骤完成申请，若最终未能成功获得著作权登记，可联系服务提供方进行免费咨询和指…...

编程日记 2025/2/14 12:46:55

SOUI基于Zint生成Code11码

Code 11 是一种高密度的数字条形码&#xff0c;主要用于标识电信设备和电子元件。它的名称来源于其能够编码 11 种字符&#xff1a;数字 0-9 和连接符 -。Code 11 是一种双向可读的条形码&#xff0c;支持校验位以提高数据准确性。 在使用BARCODE_CODE11码制生成code 11码时可指…...

编程日记 2025/2/14 12:45:54

sqlilabs第八关

?id1 and sleep(2)-- 发现页面存在注点&#xff0c;使用时间盲注脚本进行注入--- import requestsdef inject_database(url):name #name用于存储猜测出的数据库名称 for i in range(1, 20): # 假设数据库名称长度不超过20low 48 # 0high 122 # zmiddle (low high…...

编程日记 2025/2/14 12:44:51

基于HAL库的按钮实验

实验目的 掌握STM32 HAL库的GPIO输入配置方法。 实现通过按钮控制LED亮灭&#xff08;支持轮询和中断两种模式&#xff09;。 熟悉STM32CubeMX的外部中断&#xff08;EXTI&#xff09;配置流程。 实验硬件 开发板&#xff1a;STM32系列开发板&#xff08;如STM32F103C8T6、N…...

编程日记 2025/2/14 12:43:46

DeepSeek 突然来袭，AI 大模型变革的危机与转机藏在哪？

随着人工智能技术的飞速发展&#xff0c;大模型领域不断涌现出具有创新性的成果。DeepSeek 的横空出世&#xff0c;为 AI 大模型领域带来了新的变革浪潮。本文将深入探讨 DeepSeek 出现后 AI 大模型面临的危机与转机。 冲冲冲&#xff01;&#xff01;&#xff01; 目录 一、…...

编程日记 2025/2/14 12:42:42

prompt技术结合大模型 生成测试用例

要利用prompt技术结合大模型对目标B/S架构软件系统进行测试，以下以使用Python调用OpenAI的GPT模型进行功能测试用例生成，再借助Selenium库执行测试为例，给出一个完整的实现示例。 前提条件 安装依赖库：你需要安装openai和selenium库，可以使用以下命令进行安装：pip insta…...

编程日记 2025/2/14 12:41:38

【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 …...

编程日记 2025/2/14 12:40:36

pip安装指定版本的包

个人博客地址&#xff1a;pip安装指定版本的包 | 一张假钞的真实世界 使用以下命令安装指定版本的包&#xff1a; # pip install pyspark2.3.3...

编程日记 2025/2/14 12:39:32

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/2/4 19:38:41

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07