Vue3 Teleport 组件

<Teleport>是一个内置组件,它允许我们将组件模板的一部分“传送”到存在于该组件 DOM 层次结构之外的 DOM 节点中。

Teleport 的目的

我们首先要了解的是,何时使用、以及为什么使用 Teleport

在处理更大的 Vue 项目时,以逻辑的方式组织代码库变得非常重要。然而,当处理某些类型的组件(如模态、通知或工具提示)时,模板 HTML 的逻辑可能位于不同的文件中,而不是我们想要渲染元素的文件中。

事实上,很多时候,当这些元素与我们的 Vue 应用程序的 DOM 完全分开处理时,它们更容易管理。这一切都是因为处理嵌套组件的定位、z-index 和样式可能会因为处理其所有父组件的范围而变得棘手。

这就是 Teleport 功能派上用场的地方。我们可以在其逻辑所在的组件中编写模板代码,这意味着我们可以使用组件的 dataprops。随后将其渲染到 Vue 应用程序的范围之外。

如果不使用 Teleport,我们将不得不担心事件传播,以便将逻辑从子组件传递到DOM 树,但现在要简单得多。

让我们看一个例子。

Teleport 示例

假设我们有一个子组件,我们想在其中触发弹出的通知。

首先,在 </body> 之前添加一个 <div>

<body>
  <div id="app"></div>
  <div id='notification'></div>
</body>

接下来,让我们开始创建触发要渲染通知的组件。

<template>
  <teleport to="#notification">
    <div v-if="isOpen" class="notification">您干嘛呀!</div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
const closePopup: any = ref(null)
const showNotification = () => {
  isOpen.value = true
  clearTimeout(closePopup.value)
  closePopup.value = setTimeout(() => {
    isOpen.value = false
  }, 2000)
}
</script>

<style lang="scss" scoped>
.notification {
  font-family: myriad-pro, sans-serif;
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 300px;
  padding: 30px;
  background-color: plum;
}
</style>

它的步骤很简单:

  • 在您想要插入 DOM 的地方,预留一个标签,并提供一个 idclass,让 teleport 知道是哪个标签。
  • 编写一段需要渲染的 HTML 结构,并使用 teleport 组件包裹住它。
  • teleport 标签上使用 to 属性,指向预留的标签。to 的值为提供标签的 idclass
全部评论

相关推荐

没有offer的呆呆:薪资有的时候也能说明一些问题,太少了活不活得下去是一方面,感觉学习也有限
点赞 评论 收藏
分享
水墨不写bug:疑似没有上过大学
点赞 评论 收藏
分享
今天 11:16
湖南大学 Web前端
我看到好多人都在说0offer好焦虑,结果一看是投了百度快手字节啥的。好像大家都是只想通过校招进大厂,对小公司是不考虑的吗😂可是能进大厂的难道不是只有少部分人吗,真心发问
喜欢核冬天的哈基米很想上市:我是因为已经有一段小厂了,很短,管理也很那啥,不想再做小厂的实习了,所以拿到的都拒了
投递快手等公司9个岗位 >
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务