Vue3 Teleport 简介，请过目，这个是真的好用
cac55 2024-10-05 13:46 30 浏览 0 评论
本文已经过原作者 ichael Thiessen 授权翻译。
关于 ve3 的一个新特性已经讨论了一段时间了，那就是 Portals(传送门) ，它的功能是将模板HTML移动到DOM不同地方的方法。Portals是React中的一个常见特性，Vue2 中可以使用portal-vue库。
Vue3 中，提供了 Teleport 来支持这一功能。
Teleport 的目的
我首先要了解的是何时使用 Teleport 功能。
在处理较大的Vue项目时，有逻辑处理组织代码库是很重要的。但是，当处理某些类型的组件（如模式，通知或提示）时，模板HTML的逻辑可能位于与我们希望渲染元素的位置不同的文件中。
实际上，在很多时候，与我们的Vue应用程序的DOM完全分开处理时，这些元素的管理要容易得多。所有这些都是因为处理嵌套组件的位置，z-index和样式可能由于处理其所有父对象的范围而变得棘手。
这种情况就是 Teleport 派上用场的地方。我们可以在逻辑所在的组件中编写模板代码，这意味着我们可以使用组件的数据或 props。但是，然后完全将其渲染到我们Vue应用程序的范围之外。
如果不使用 Teleport，我们将不得不担心从子组件向DOM树传递逻辑的事件传播，但现在要简单得多。
Vue Teleport 是如何工作的
假设我们有一些子组件，我们想在其中触发弹出的通知。正如刚才所讨论的，如果将通知以完全独立的DOM树渲染，而不是Vue的根#app元素，则更为简单。
我们要做的第一件事是打开我们的index.html，并在</body>之前添加一个<div>。
// index.html
<body>
<div id="app"></div>
<div id='portal-target'></div>
</body>
接下来，创建触发要渲染的通知的组件。
// VuePortals.vue
<template>
<div class='portals'>
<button @click='showNotification'> Trigger Notification! </button>
<teleport to='#portal-target'>
<div v-if="isOpen" class='notification'>
This is rendering outside of this child component!
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const isOpen = ref(false)
var closePopup
const showNotification = () => {
isOpen.value = true
clearTimeout(closePopup)
closePopup = setTimeout(() => {
isOpen.value = false
}, 2000)
}
return {
isOpen,
showNotification
}
}
}
</script>
<style scoped>
.notification {
font-family: myriad-pro, sans-serif;
position: fixed;
bottom: 20px;
left: 20px;
width: 300px;
padding: 30px;
background-color: #fff;
}
</style>
在此代码段中，当按下按钮时，将渲染2秒钟的通知。但是，我们的主要目标是使用Teleport获取通知以在我们的Vue应用程序外部渲染。
如你所见，Teleport具有一个必填属性- to
to 需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 <teleport> 内容的目标元素
由于我们在#portal-target中传递了代码，因此 Vue会找到包含在index.html中的#portal-target div，它会把 Teleport 内的所有代码渲染到该div中。
下面是运行的结果：
检查元素和查看DOM可以清楚地知道发生了什么。
我们可以使用VuePortals组件中的所有逻辑，但是告诉我们的项目在其他地方渲染该模板代码！
总结
以上就是Vue Teleport的基本介绍。在不久的将来，后面会介绍一些更高级的用例，今天这篇开始使用此炫酷功能开始！
有关更深入的教程，查看Vue3文档。
~完，我是刷碗智，我要去刷晚了，骨得白！
作者：Michael Thiessen 译者：前端小智 来源：news
原文：https://learn.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/
相关推荐
- 小车五位自动循环往返控制_小车自动往返控制系统
-
需求描述:用三相异步电动机拖动一辆小车在A、B、C、D、E五点之间自动循环往返运行,小车初始在A点，按下启动按钮，小车依次前进到B、C、D、E点，并分别停止2s返回到A点停止。按下停止...
- 自动灌溉系统_自动灌溉系统by
-
需求描述:PLC时钟设定每日6:00、18:00自动启动灌溉系统，每次运行15分钟后停止；非定时时段按下手动灌溉按钮，立即启动并运行15分钟；土壤湿度传感器检测到湿润时，跳过本次定时灌溉...
- 主板ERP开启还是关闭好_主板设置erp是什么
-
主板功能的开启与关闭，本质是在“节能环保”和“使用便利”之间做选择。为帮你快速决策，先给出直接结论，再深入解析原理、影响及操作步骤，让你根据自身需求精准设置。一、直接结论：ERP功能如何选？...
- 新电脑必做5项设置!做完再玩，流畅安全多用三年
-
刚拿到新电脑，兴奋之余先别急着开机畅玩！做好以下这5大设置，能让你的爱机长期保持流畅如新，安全又省心。尤其是最后一招，很多老用户都不知道！1关闭隐私常规，杜绝数据偷跑新电脑首次开机进行系统初始化时，...
- 属于 PHP 开发者的 Supervisor 实用指南
-
属于PHP开发者的Supervisor实用指南在PHP开发中，我们经常需要运行一些后台进程：队列处理、长时间运行的脚本、WebSocket服务器等。这些进程可能会因为各种原因意外退出，手...
- 领导半夜12点微信派活?三句高情商回复，反手拿捏让他不敢再烦
-
友友们大家来啦!今天来和大家一起分享精彩话题老规矩先点赞再看文！0102别在这里害人了，现在能保住工作就烧高香了，再得瑟，明天早上去办离职0304很简单，把他一起拉上，每半小时打电话或语音汇报，一两次...
- "零点黑科技!硬盘自动备份+离线神操作，服务器数据安全躺赢"
-
公司有一台服务器，数据库需要每天零点进行数据库备份，要求在本机备份一次，再在移动硬盘上异地备份一次。备份完成后硬盘自动离线。具体思路如下：数据库自动备份时间为每天0点，备份过程约需1分钟。0点时开启硬...
- 峰谷电:白天贵、晚上便宜，你家真的适合开通吗?
-
电费单又超预算了？别急着关掉空调，其实你可能错过了一个"电费打折"的机会——峰谷电。它就像电影院的日场和夜场票，白天贵、晚上便宜，聪明利用，电费真的能省下来。一、峰谷电是什么？峰谷电把...
- 电脑开机密码设置全指南:从基础到进阶的安全防护
-
在数字化时代，电脑存储着大量个人隐私和重要数据，设置开机密码是保护信息安全的第一道防线。本文将系统介绍Windows、macOS、Linux三大主流操作系统及BIOS层面的密码设置方法，同时涵盖密码管...
- 自动喷香机_香薰机自动喷香机
-
需求描述:PLC时钟设定每日9:00、14:00、18:00自动启动喷雾，每次喷雾3秒后停止；非定时时段按下手动喷雾按钮，立即喷雾3秒；香薰液缺液传感器检测到液位过低时，停止喷雾并亮报警...
- macbook系统自动启动项在哪里查看
-
了解和管理MacBook的开机自动启动项，是优化系统启动速度和运行效率的好方法。下面我来为你介绍几种查看和管理这些启动项的方法。查看和管理MacBook启动项1.通过系统设置（最简单直接的方法）...
- 想让电脑自己到点开机和关机?这4个超实用的设置方法快收好!
-
嘿，你是不是也经常忙到忘记关电脑？或者早上想用电脑时发现还没开机？别慌，今天我就跟你分享几个超实用的方法，帮你轻松搞定电脑的定时开关机设置。不管你是电脑小白还是有点基础，这篇教程都能让你秒懂操作，省时...
- 定时关机这样操作小白也会 一招设定工作日关机 指定时间关机
-
在日常使用电脑的过程中，我们常常会遇到这样的情况：晚上睡觉前忘记手动关机，导致电脑整夜运行，既浪费电又缩短硬件寿命；或者在下载大文件时，需要等待很长时间才能完成，却不能一直守在电脑前，下载完成后也无法...
- 日本无线电操作证试题，这些问题你能答的上来吗?
-
一直以来，我们对于日本的业余无线电的印象都停留在“操作能力强，爱好者数目众多”上，然而我们对于他们的业余无线电体系所知甚少。日本业余无线电操作证的等级分作四级，最基本的四级操作证书具有8MHz以下、2...
- 你知道吗?单边带信号就像DNA分子一样!
-
我们在准备B级操作证书的过程中，避免不了的要接触到一个新的名词——SSB。单边带是传统AM模式的一种特殊的形式，在传送相同的信息的过程中，其占用的带宽仅为AM模式的一半，那么SSB模式到底是怎样的一种...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)