Vue3 Teleport 简介，请过目，这个是真的好用
cac55 2024-10-05 13:46 27 浏览 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/
相关推荐
- 无力吐槽的自动续费（你被自动续费困扰过吗?）
-
今天因为工作需要，需要在百度文库上下载一篇文章。没办法，确实需要也有必要，只能老老实实的按要求买了个VIP。过去在百度文库上有过类似经历，当时为了写论文买了一个月的VIP，后面也没有太注意，直到第二个...
- 百度文库推出“文源计划”创作者可一键认领文档
-
11月7日，百度文库发布了旨在保护创作者权益的“文源计划”。所谓“文源计划”，即为每一篇文档找到源头，让创作者享受更多的权益。据百度文库总经理李小婉介绍，文源计划分为三部分，分别是版权认证、版权扶持和...
- 有开放大学学号的同学，百度文库高校版可以用了。
-
还在网上找百度文库的下载方式，只要从身边的朋友在读开放大学的，那他（她）的学号就可以登陆到国家开放大学图书馆，还使用百度文库高校版来下载。与百度文库稍有不同，但足够使用了。现转国图链接如下：htt...
- 搜索资源方法推荐（搜索资源的方法）
-
今天msgbox就要教大家如何又快又准的搜到各类资源，第一点，排除干扰百度搜索出来啊经常前排展示它的产品以及百度文库，如何去除呢？很简单，后面输入空格减号百度文库，比如你搜高等数学百度文库很多，只要后...
- 一行代码搞定百度文库VIP功能（2021百度文库vip账号密码共享）
-
百度文库作为大家常用查资料找文档的平台，大多数文档我们都可以直接在百度文库找到，然而百度文库也有让人头痛的时候。好不容易找到一篇合适的文档，当你准备复制的时候他却提示你需要开通VIP才能复制~~~下载...
- 百度文库文档批量上传工具用户说明书
-
百度文库文档批量上传工具用户说明书1、软件主要功能1、批量上传文档到百度文库，支持上传到收费、VIP专享、优享以及共享。2、支持自动分类和自动获取标签3、支持多用户切换，一个账户传满可以切换到...
- 百度文库现在都看不到文档是否上传成功，要凉了吗?
-
打开知识店铺，百度文库文档里显示都是下载这一按键，上传的文档也看不到是否成功？咋情况，要取消了吗？没通过审核的也不让你删除，是几个意思，想通吃吗？现在百度上传文档也很费劲，有时弄了半天的资料上传审核过...
- 微信推广引流108式:利用百度文库长期分享软文引流
-
百度文库相对于百度知道、百度百科来说，操作上没那么多条条框框，规则上也相对好把握些。做一条百度知道所花费的精力一般都会比做一条百度文库的要多些，老马个人操作下来觉得百度文库更好把握。但见仁见智吧，今天...
- 职场“避雷”指南 百度文库推出标准化劳动合同范本
-
轰轰烈烈的毕业季结束了，众多应届生在经过了“职场海选”后，已正式成为职场生力军的一员。这一阶段，除了熟悉业务，签订劳动合同、了解职场福利也迅速被提上日程。而随着国人法律意识的增强，百度文库内《劳动合同...
- 《百度文库》:素材精选宝库（百度文库官网首页）
-
《百度文库》：独特功能助力选择高质量素材在当今信息爆炸的时代，如何高效地获取并利用有价值的素材成为了许多人面临的挑战。而《百度文库》作为百度公司推出的一款在线文档分享平台，凭借其丰富的资源、强大的功能...
- 深度整合和开放AI能力 百度文库和网盘推出内容操作系统「沧舟OS」
-
【TechWeb】4月25日消息，Create2025百度AI开发者大会上，百度文库和百度网盘推出全球首个内容操作系统——沧舟OS。基于沧舟OS,百度文库APP全新上线「GenFlow超能搭子」...
- 女子发现大二作业被百度文库要求付费下载，律师:平台侵权，应赔偿
-
近日，28岁的黎女士在百度百科搜索家乡的小地名时，发现了自己在大二完成的课题作业。她继续搜索，发现多个平台收录了该文，比如豆丁网和文档之家等，有的还设置了付费或积分下载。2月15日，九派新闻记者以用户...
- 2016杀入百度文库的新捷径，只有少数人才知道的喔
-
百度的产品在SEO优化中的分量真不用多说，其实很多人都像我一样一直在找捷径。但是我经常发现很多人都是在用死方法。比如发贴吧发帖而不知道去申请一个吧主，知道自问自答而不知道去申请一个合作资格。口碑和贴吧...
- 百度文库付费文档搜索方法（百度文库付费文档搜索方法有哪些）
-
一直以来，百度文库中无论是个人中心还是个人主页，都没有像淘宝一样的店内搜索功能，连最近新开的知识店铺也没有设计店内搜索功能，这无论是对上传用户还是下载用户都不方便，上传用户想要搜索自己的文档无法办到...
- 供读者免费使用!泰达图书馆机构版百度文库新年上新啦
-
在泰达图书馆读者使用百度文库数字资源不需要VIP，免-费-用！惊不惊喜？快来了解一下吧……新年伊始，为满足区域企业、高校、科研院所以及居民群众在教学、科研及学习过程中，对各类文献资源的需求，泰达图书馆...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (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)