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

Vue 3.0 中 Teleport 详解

news 来源：原创 2025/7/15 21:51:04

Teleport 是 Vue 3.0 引入的一个非常有用的特性，它允许你将组件的一部分模板"传送"到 DOM 中的其他位置，而不改变组件的逻辑层次结构。

1. 基本概念

Teleport 的主要用途是将某些 DOM 元素渲染到 Vue 应用之外的 DOM 节点中，这在处理模态框、通知、加载提示等需要突破当前组件 DOM 层级的场景时特别有用。

2. 基本语法

<teleport to="目标选择器"><!-- 要传送的内容 -->
</teleport>

3. 使用示例

3.1. 基本使用

<template><div><button @click="showModal = true">打开模态框</button><teleport to="body"><div v-if="showModal" class="modal"><div class="modal-content">这是一个模态框<button @click="showModal = false">关闭</button></div></div></teleport></div>
</template><script setup>
import { ref } from 'vue';const showModal = ref(false);
</script><style>
.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);display: flex;justify-content: center;align-items: center;
}.modal-content {background: white;padding: 20px;border-radius: 5px;
}
</style>

3.2. 传送到特定元素

<template><div><div id="teleport-target"></div><teleport to="#teleport-target"><p>这段内容会被传送到上面的div中</p></teleport></div>
</template><script setup>
// 不需要响应式数据时，setup 语法糖可以完全省略 script 内容
</script>

4. 高级用法

4.1. 与组件一起使用

Teleport 可以包含任何 Vue 模板内容，包括组件：

<template><div><teleport to="#modal-container"><MyModalComponent v-if="showModal" @close="showModal = false" /></teleport></div>
</template><script setup>
import { ref } from 'vue';
import MyModalComponent from './MyModalComponent.vue';const showModal = ref(false);
</script>

4.2. 禁用 Teleport

可以通过动态绑定 disabled 属性来禁用 Teleport：

<template><div><teleport to="#modal-container" :disabled="shouldDisable"><!-- 内容 --></teleport></div>
</template><script setup>
import { ref } from 'vue';const shouldDisable = ref(false);
</script>

当 shouldDisable 为 true 时，内容不会被传送，而是在原地渲染。

4.3. 多个 Teleport 到同一目标

多个 Teleport 可以传送到同一个目标元素，它们会按照在源代码中的顺序追加到目标中：

<template><div><teleport to="#target"><div>A</div></teleport><teleport to="#target"><div>B</div></teleport><!-- 结果会是 A 在 B 前面 --></div>
</template><script setup>
// 不需要额外的逻辑
</script>

5. 注意事项

1. 目标元素必须存在：Teleport 的目标元素必须在传送发生前已经存在于 DOM 中，如果目标元素不存在，传送的内容将不会被渲染；

2. SSR 中的使用：在服务器端渲染中，Teleport 的内容需要特殊处理，通常需要客户端激活过程来正确处理传送的内容；

3. 与 Vue 2 的对比：Vue 2 中可以使用类似功能的库如 portal-vue，但 Vue 3 内置的 Teleport 更加高效和集成；

4. 性能考虑：虽然 Teleport 很方便，但过度使用可能导致 DOM 结构难以理解和维护，应谨慎使用；

6. 实际应用场景

1. 模态框和对话框：确保它们位于 body 的直接子元素，避免被父元素的样式影响；

2. 通知和提示：将通知渲染到专门的容器中；

3. 全屏加载指示器：避免被局部滚动容器限制；

4. 工具提示和弹出菜单：当组件层级很深时，确保它们能正确显示；

Teleport 是 Vue 3 中解决 DOM 层级限制问题的优雅方案，合理使用可以大大提高 UI 组件的灵活性和可维护性。

Vue 3.0 中 Teleport 详解

Teleport 是 Vue 3.0 引入的一个非常有用的特性，它允许你将组件的一部分模板"传送"到 DOM 中的其他位置，而不改变组件的逻辑层次结构。 1. 基本概念 Teleport 的主要用途是将某些 DOM 元素渲染到 Vue 应用之外的 DOM 节点中，这在…...

编程日记 2025/7/15 21:51:04

Linux在防火墙中添加开放端口

例如：安装docker时启动报错： Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details. 此时开放对应端口号就可以咯在防…...

编程日记 2025/6/28 22:00:25

day24：零基础学嵌入式之系统编程

一、系统编程包含文件的读写、和常用操作，操作系统已经进入多任务时代，在同一时刻同时运行多个程序。二、标准io；stdio.h（以计算机为中心） 1.头文件路径：/usr/include/stdio.h so动态库：st…...

编程日记 2025/7/15 7:01:13

2.10 财务分析

10.1 财务报告构成及列报基本要求 10.1.1 财务报告 1.财务报告的构成资产负债表、利润表、现金流量表、所有者权益变动表和附注小型企业可不编现金流量表。 2.财务报表及其作用 1.资产负债表的内容及其作用内容资产类、流动性大小顺序排序。流动资产、非流动资产负债和…...

编程日记 2025/7/11 8:05:55

docker容器知识

一、docker与docker compose区别： 1、docker是创建和管理单个容器的工具，适合简单的应用或服务； 2、docker compose是管理多容器应用的工具，适合复杂的、多服务的应用程序； 3、docker与docker compose对比&#xff…...

编程日记 2025/7/14 17:25:13

国标GB28181视频EasyGBS视频监控平台搭建城市交通道路可视化管理/道路视频巡检/应急监控指挥

一、方案背景随着城市人口与车辆激增，交通管理面临严峻挑战：高峰期道路拥堵、事故处理滞后、违法取证低效，传统管理模式难以为继。智慧交通依托信息技术，成为破局关键，其中视频监控是实现精细化管理的核心。国标GB…...

编程日记 2025/7/10 15:26:23

【LeetCode 热题 100】有效的括号 / 最小栈 / 字符串解码 / 柱状图中最大的矩形

⭐️个人主页：小羊 ⭐️所属专栏：LeetCode 热题 100 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录栈有效的括号最小栈字符串解码每日温度柱状图中最大的矩形堆数组中的第K个最大元素栈有效的括号有效的括号 cl…...

编程日记 2025/7/11 1:08:07

Oracle中如何解决BUFFER BUSY WAITS

和BUFFER CACHE相关的常见等待事件还有BUFFER BUSY WAITS。顾名思义，BUFFER BUSY WAITS等待事件指的是多个会话不能共享缓冲区中的数据块而引发的等待事件。发生BUFFER BUSY WAITS事件时，P1值代表数据文件号，P2值代表数据块号，P3…...

编程日记 2025/7/10 1:24:39

LeetCode 93.复原IP地址 LeetCode 78.子集 LeetCode 90.子集II

LeetCode 93.复原IP地址其实思想跟回文字符串那道题是类似的，但难点在于这道题的终止条件和判断是否IP地址进行划分后是否合理？ 思路： 通过一个int类型的全局变量来记载 " . " 的数目 / 记录你当前所获得的小数组的数目&#x…...

编程日记 2025/7/9 5:09:56

Java转Go日记（四十一）：Gorm删除

1.1.1. 删除/软删除警告删除记录时，需要确保其主要字段具有值，GORM将使用主键删除记录，如果主要字段为空，GORM将删除模型的所有记录 // 删除存在的记录db.Delete(&email)DELETE from emails where id10;// 为Delete语句添加…...

编程日记 2025/7/15 1:30:52

Java基于SpringBoot的公交智能化系统，附源码+文档说明

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/7/9 22:56:16

电子电器架构 --- 汽车高性能计算

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...

编程日记 2025/7/15 17:06:27

Journal of Real-Time Image Processing 投稿过程

投稿要求双栏12页以内(包括参考文献)，这个排版要求感觉不是很严格，我当时就是用普通的双栏的格式去拍的版，然后就提交了，也没单独去下载模版。投稿过程 12.12 Submission received 12.12 Submission is under technical check 1…...

编程日记 2025/7/11 1:03:29

利用basee64特性 -- BYUCTF 2025 JWTF

题目信息: Unfortunately one of our JWTs was compromised by attackers, so we created a JWT Revocation List to ensure they can’t use it anymore. 代码量很少 # 导入必要的模块 # 从 flask 模块导入 Flask, request, redirect, make_response, jsonify 类和函数 from f…...

编程日记 2025/7/15 9:08:45

湖北理元理律师事务所：科学债务规划如何平衡还款与生活

在债务压力普遍加剧的背景下，如何通过专业规划实现“还款不停生活”，成为许多债务人关注的核心问题。湖北理元理律师事务所基于多年实务经验，总结出一套兼顾法律合规性与人性化需求的债务管理方案，其核心逻辑在于通过法律工具优化…...

编程日记 2025/7/11 4:56:15

1.1HarmonyOS NEXT技术架构深度解析：微内核架构与系统分层

HarmonyOS NEXT技术架构深度解析：微内核架构与系统分层摘要作为面向万物互联时代的全场景操作系统，HarmonyOS NEXT通过革命性的星核架构（Star Kernel）重构了系统底层架构。本文将深入解析HarmonyOS NEXT的微内核设计原理、系统…...

编程日记 2025/7/6 13:01:21

考研系列-408真题计算机组成原理篇（2015-2019）

写在前面此文章是本人在备考过程中408真题计算机组成原理部分（2015年-2019年）的易错题及相应的知识点整理，后期复习也常常用到，对于知识提炼归纳理解起到了很大的作用，分享出来希望帮助到大家~ # 2015年 1.IO端口接口电路中可以被CPU直接访问的寄存器 IO控制方式-中断…...

编程日记 2025/7/11 14:12:03

HarmonyOS Next 关键资产的解释

关键资产的安全存储与管理：HarmonyOS Asset Store Kit 深度解析一、关键资产的定义与重要性关键资产（Critical Asset）是指应用运行过程中涉及的短敏感数据，包括但不限于用户密码、身份令牌（Token）、银行…...

编程日记 2025/7/10 12:28:21

Awesome ChatGPT Prompts：释放AI对话潜力的开源利器

项目概览 Awesome ChatGPT Prompts 是由土耳其开发者 Fatih Kadir Akın 发起的开源项目，托管于 GitHub，旨在通过精心设计的提示词模板（Prompts）优化用户与 ChatGPT 的交互体验。项目以 Markdown 和 CSV 格式管理模板，无需复杂编程语言，但需文本处理能力，目前已在 GitH…...

编程日记 2025/7/12 7:23:44

第6章 C控制语句：循环

目录 6.1 再探while 循环6.2 while语句6.3 比较大小：使用关系运算符和表达式6.4 不确定的循环与计数循环6.5 for循环6.6 更多赋值运算符：、-、*、/和%6.7 逗号运算符6.8 退出条件循环：do while6.9 选择哪种循环6.10 嵌套循环6.11 数组6.12 使…...

编程日记 2025/7/7 15:34:20

海盗王客户端更换横版任务面板的实现

海盗王的任务面板，采用的是竖长设计，上半部分显示任务列表，下半部分显示任务详情。这样的设计会带来一个问题：就是任务多的时候，不能完整显示，只能显示前面几个，后面的会隐藏到滚动条里面&…...

编程日记 2025/7/12 6:47:12

【git】在Windows上搭建git服务器

1、简述常用的搭建git服务器的工具有：Gogs、Gitblit、Gitea、GitLab 它们的区别如下： 功能GogsGitblitGiteaGitLab界面语言中文、英文等多语言英文为主中文、英文等多语言英文为主权限管理基础分支权限详细分支权限基础详细分支权限非常完善代码审查…...

编程日记 2025/7/11 19:30:52

leetcode hot100刷题日记——6.和为 K 的子数组

解答：前缀和思想，见灵茶山艾府大大题解。 （1）前缀和思想： 前缀和数组prefix_sum的定义是prefix_sum[i] nums[0] nums[1] … nums[i]。如果存在两个前缀和prefix_sum[j]和prefix_sum[i]满足prefix_sum[i] - prefi…...

编程日记 2025/7/11 1:14:07

人工智能的“歧视”：“她数据”在算法运行中隐形

纵观人类的发展史，每一次科技进步都将对性别平等产生深刻影响。尤其是当下，人们对于借助人工智能技术快速发展来弥合性别不平等寄予厚望。但很多人没想过，人工智能技术本身是客观中立、不存在“算法歧视”“性别偏见的吗？ 弗吉…...

编程日记 2025/7/11 4:55:50

Java数组列表 - ArrayList

在Java中，ArrayList是一种非常实用的数据结构，它允许开发者动态地管理数组大小。通过ArrayList，可以轻松地添加、删除和修改元素，以及获取元素和列表的大小。例如，创建一个ArrayList来存储字符串，然后通过a…...

编程日记 2025/7/11 16:28:54

跨境外贸电商供应链一体化ERP管理系统

项目介绍: 跨境外贸电商供应链一体化ERP管理系统高清视频演示: 跨境外贸电商供应链一体化ERP管理系统_哔哩哔哩_bilibili 系统说明: 外贸电商产品ERP系统包含多个角色（客户、客服、工厂、供应商）和多个功能模块，以下是系统功能的详细说明…...

编程日记 2025/7/10 19:43:45

数据库表连接结构详解

数据库表连接结构详解介绍本文基于提供的SQL表结构，解释了表之间的连接关系。这些表主要涉及AI系统配置，如客户端、顾问和智能体等。通过外键（如client_id、agent_id），这些表形成关联网络。表连接概述以下是主…...

编程日记 2025/7/11 14:51:26

Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

文章目录 4、watch监视4.1 前言4.2 情况一4.3 情况二 4、watch监视 4.1 前言作用：监视数据的变化（和vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。reactive定义的数据。函数返回…...

编程日记 2025/7/10 20:51:17

【Java的批量操作】

系列文章目录 Java知识点文章目录系列文章目录👉前言👉一、常见批量操作方法👉1-1、JDBC 批量操作（数据库）👉1-2、MyBatis 批量操作👉1-3、Java 8 Stream 批量处理集合👉1-4、多线…...

编程日记 2025/7/10 8:30:05

流复备机断档处理

文章目录环境症状问题原因解决方案环境系统平台：UOS（海光）,UOS （飞腾）,UOS（鲲鹏）,UOS（龙芯）,UOS （申威）,银河麒麟svs（X86_64&…...

编程日记 2025/6/28 22:00:33

PostgreSQL架构

目录一、PostgreSQL核心特性与优势 1.PostgreSQL简介 2.PostgreSQL的核心特点 （1）开源与自由 （2）高度符合SQL标准 （3）丰富的数据类型 （4）事务与并发控制 （5&…...

编程日记 2025/7/15 18:50:58

苍穹外卖系统结构与功能报告

一、系统简介苍穹外卖系统是为餐饮企业定制的数字化解决方案，包含管理端后台和用户端小程序两部分。管理端面向餐饮企业员工，支持菜品、套餐、订单等核心业务的数字化管理；用户端面向消费者，提供在线点餐、支付、订单跟踪等功能…...

编程日记 2025/7/10 12:28:30

CAU数据库class3 关系型数据库基础

关系数据库模型的3个要素数据结构二维表数据操作特点操作的对象为元组，操作的结果为元组高度非过程化，用户不关系是怎么实现的完整性约束数据完整性是指保证数据真确的特性实体完整性参照完整性用户定义完整性关系的形式定义例子&…...

编程日记 2025/7/2 7:07:42

【Qt】在OrinNX上，使用命令安装qtmultimedia5-dev时报错

1、问题描述在OrinNX+Ubuntu20.04上，使用命令安装qtmultimedia5-dev时报错 sudo apt install qtmultimedia5-devThe following packages have unmet dependencies: qtmultimedia5-dev : Depends: libpulse-dev but it is not going to be installed E: Unable to correct p…...

编程日记 2025/7/11 8:20:48

阿里云CDN刷新预热--刷新URL

文章目录一、全英文URL刷新预热二、掺杂中文的URL刷新预热2.1 对带中文URL进行编码2.2 预热刷新三、CDN刷新-核心作用与价值3.1 核心作用3.2 核心价值3.3 典型使用场景 *最后我想说：请你不要相信我说的每一句话，这只是我的个人经验* 一、全英文URL刷新…...

编程日记 2025/7/13 4:19:58

anaconda、miniconda、conda的关系及miniconda安装

anaconda、miniconda、conda的关系及miniconda安装文章目录前言正文定义关系Linux安装miniconda新建一个python3.8环境参考前言本文用于记录关于Anaconda、conda和Miniconda的定义及其关系的总结123： 正文定义 conda 一个跨平台的开源包管理和环境管理工具…...

编程日记 2025/7/12 12:49:27

SpringBoot实现本地对象存储【minio、阿里云、七牛云】

引入依赖  <dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.5.12</version> </dependency> <dependency><groupId>com.aliyun.…...

编程日记 2025/7/11 13:30:04

阿里云百炼(1) : 阿里云百炼应用问答_回答图片问题_方案1_提问时上传图片文件

直接用于拍照答题不大理想, 可能适用其他用途, 更好的方案: 阿里云百炼(1) : 阿里云百炼应用问答_回答图片问题_方案2_提取题目再提问-CSDN博客 1.实现代码 package cn.nordrassil.ly.test.拍照答题;import com.alibaba.dashscope.app.Application; import com.alibaba.dashsc…...

编程日记 2025/7/15 17:43:42

理解阿里云的MQTT

一、阿里云的mqtt分几种阿里云提供的MQTT服务主要分为‌标准MQTT协议‌和‌P2P模式MQTT‌两种类型，二者在通信模式及适用场景上有显著差异： 1、标准MQTT与P2P MQTT的区别 ‌特性‌‌标准MQTT‌‌P2P模式MQTT‌‌通信模式‌发布/订阅（Pub/S…...

编程日记 2025/7/15 17:38:55

HarmonyOS5云服务技术分享--云缓存快速上手指南

大家好，今天我们来聊聊如何快速上手华为AppGallery Connect（AGC）的云缓存服务。作为一款基于Serverless架构的Key-Value型缓存服务，它不仅能自动弹性伸缩，还能免去运维烦恼，非常适合高并发场景下的数据快速…...

编程日记 2025/7/11 1:07:16

FreeSWITCH rtcp-mux 测试

rtcp 跟 rtp 占用同一个端口，这就是 rtcp 复用 Fs 呼出是这样的： originate [rtcp_muxtrue][rtcp_audio_interval_msec5000]user/1001 &echo 需要同时指定 rtcp_audio_interval_msec，否则 rtcp_mux 不能生效 Fs 呼入不需要配置&#xf…...

编程日记 2025/7/13 13:43:35

浏览器播放 WebRTC 视频流

源码（vue） <template><video ref"videoElement" class"video" autoplay muted playsinline></video> </template><script setup lang"ts">import { onBeforeUnmount, onMounted, ref } fr…...

编程日记 2025/7/10 17:17:21

SpringBoot3+Vue3(1)-后端请求头校验，jwt退出登录，mybaits实现数据库用户校验

1.后端：jwt请求头校验解析工具类jwtUtils 解析token 令牌是否过期，验证正常、异常、运行时错误倒入工具类是resource 工具类中添加解析用户的方法： 在在工具类添加id解析此处调用添加controller做测试测试&…...

编程日记 2025/7/14 1:47:46

Oracle RAC 中的 RBAL 进程

Oracle RAC 中的 RBAL 进程 RBAL 进程概述 RBAL（ReBalancer）是 Oracle RAC 和 ASM（Automatic Storage Management）环境中的一个关键后台进程，主要负责 ASM 磁盘组的重新平衡操作。主要功能磁盘组监控&#xff1a…...

编程日记 2025/7/10 12:43:57

mac上将 Excel 文件的扩展名从 .xls 改为 .xlsx 后，打开时报错：“文件格式或文件扩展名无效”。

方法一：使用 Excel for Mac 打开并另存为打开 Excel 应用程序。打开你的 .xls 文件： 如果 Excel 能正常打开它，说明文件没问题。在菜单栏点击：文件 → 另存为。在文件格式中选择：Excel 工作簿 (.xlsx)。点击保存…...

编程日记 2025/7/11 1:03:21

【算法-栈】深入栈模拟题：从题型特征到实现技巧

算法相关知识点可以通过点击以下链接进行学习一起加油！双指针滑动窗口二分查找前缀和位运算模拟链表哈希表字符串模拟在算法学习中，栈是最基础也是最容易上手的数据结构之一。然而，当它被用于模拟复杂操作流程时，却常常成为区分“…...

编程日记 2025/7/11 20:02:10

OK536N-C测评:开箱体验以及在Linux下如何管理开发板

前言 OK536N-C终于到我手上了，因为我的主要领域是做嵌入式音视频。例如相机类产品，录像类产品，直播类产品都是我所涉及到的。本片文章一起来开箱见证下OK536N-C有哪些魅力，据说很强。对于一个嵌入式领域的开发者来说&#xff0…...

编程日记 2025/7/13 8:23:21

【强化学习】深度强化学习 - Deep Q-Network（DQN）算法

文章目录摘要一、DQN核心原理1. Q-learning回顾2. 用深度网络逼近Q函数3. 经验回放（Experience Replay）4. 目标网络（Target Network）5. 损失函数6. ε-贪心策略（ε-greedy） 二、算法流程与伪代码三、典型实…...

编程日记 2025/7/10 13:11:48

Python实例题：PyOt实现简易浏览器

目录 Python实例题题目代码实现功能说明基本浏览功能： 标签页支持： 用户界面： 使用方法注意事项 Python实例题题目 PyOt实现简易浏览器代码实现 import sys from PyQt5.QtWidgets import (QApplication, QMainWindow, QT…...

编程日记 2025/7/14 1:47:15

MinerU可视化界面程序部署（Windows环境）

前提是要安装好MinerU，才能部署可视化程序（这个可视化程序的源码是MinerU自带的），安装MinerU的步骤参考： MinerU安装(pdf转markdown、json)-CSDN博客下面进行可视化界面的部署操作（在Windows环境部署&…...

编程日记 2025/7/14 17:03:57