Vue3 Teleport 简介,请过目,这个是真的好用!
作者:Michael Thiessen
译者:前端小智
来源:news
点赞再看,微信搜索**【大迁世界】,B站关注【前端小智】**这个没有大厂背景,但有着一股向上积极心态人。本文
GitHub
https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
关于 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 closePopupconst showNotification = () => {isOpen.value = trueclearTimeout(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文档。
~完,我是刷碗智,我要去刷晚了,骨得白!
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文: https://learn.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/
交流
文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。
Vue3 Teleport 简介,请过目,这个是真的好用!相关推荐
- 【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例 一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
- vue3 teleport的使用
vue3 teleport的使用 teleport是什么 官网介绍:Renders its slot content to another part of the DOM,翻译过来就是将其插槽内容呈现 ...
- vue3 Teleport
vue3 Teleport 使用场景 当组件模板的一部分逻辑属于该组件,但是技术上这一部分需要放到其他地方. 最典型的使用场景就是模态框 基础使用 字面意思:远距离传送 vue3中的作用就是将tele ...
- Vue3 - Teleport 传送门(详细教程)
前言 对比 Vue2 ,引出并展开 Vue3 . 本文讲述了 Teleport 传送门是什么,以及使用方法和代码示例. 介绍 学过 React 的同学可能知道, Portal 也提供了一种将子节点渲染 ...
- Vue3 Teleport(瞬移)
Teleport 是一种能够将组件的 html 结构移动到指定位置的技术. 也就是说,能将元素放到指定的位置,比如要放在 body 中,而不是在 body 元素中的元素里,那么就可以使用这个去移动到对 ...
- 首长,Redis性能优化十三条军规立好了,请过目~
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 前言 Redis作为高性能的内存数据库,在大数据量的情况下 ...
- Redis性能优化十三条军规立好了,请过目~
前言 Redis作为高性能的内存数据库,在大数据量的情况下也会遇到性能瓶颈,日常开发中只有时刻谨记优化铁则,才能使得Redis性能发挥到极致. 本文将会介绍十三条性能优化军规,开发过程中只要按照执行, ...
- 首长,Redis 性能优化十三条军规立好了,请过目~
点击上方"芋道源码",选择"设为星标" 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 8:55 更新文章,每天掉亿点点头发... 源码精品专栏 原创 | J ...
- 数据类型分类,请过目,电脑放大看更清晰哦,嘿嘿
最新文章
- Windows系统如何使用宝塔面板一键快速搭建本地服务器环境(LNMP/LAMP)
- Linux学习笔记重新梳理20180702 之 yum软件包管理器
- LINUX中printf与echo的区别
- tomcat容器是如何创建servlet类实例?用到了什么原理?
- Extjs--FormPanel(2)
- JavaScript字符集编码与解码
- php rtc,php – webRTC与本地网络
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
- 周小川:数字人民币不会取代美元 也不会威胁全球货币体系
- Android APK代码混淆与资源混淆详解,你确定不看?
- 【直观图解】模型选择之-N折交叉验证法(v-fold cross-validation)
- airpods 升级固件版本_如何查看/更新AirPods的固件版本?AirPods升级查看固件新手教程...
- 天天淘宝,你却不知道个性化推荐技术...
- 22年QQ号被盗,好友协助验证却申诉无效
- 初试hive-创建内表(最简单的表),load加载方式简介
- 读《我喜欢生命本来的样子》记(二)
- 在Unity中使用Excel表开发单选题和多选题
- python与php8,后端php和python学哪个
- 意大利语合同翻译多少钱
- 黑鹰的VIP数据库(一)
热门文章
- 高防IP的定义与作用
- 性能监控之 blackbox_exporter+Prometheus+Grafana 实现网络探测
- 《软件工程》期末试卷及答案
- android反射调用护眼模式
- Android-Q护眼模式
- 电脑系统维护 学习网站 开机检查磁盘
- “体育游戏第一股”投资未来,望尘科技走向价值兑现周期
- “沉默”两个月,华为又有动作,鸿蒙要“脱胎换骨”?
- 使用alist备份Obsidian文件,并实现全平台同步(webdav)
- 逻辑漏洞---登录验证码安全