<Teleport>是一个内置组件，它允许我们将组件模板的一部分“传送”到存在于该组件 DOM 层次结构之外的 DOM 节点中。
Teleport 的目的
我们首先要了解的是，何时使用、以及为什么使用 Teleport。
在处理更大的 Vue 项目时，以逻辑的方式组织代码库变得非常重要。然而，当处理某些类型的组件（如模态、通知或工具提示）时，模板 HTML 的逻辑可能位于不同的文件中，而不是我们想要渲染元素的文件中。
事实上，很多时候，当这些元素与我们的 Vue 应用程序的 DOM 完全分开处理时，它们更容易管理。这一切都是因为处理嵌套组件的定位、z-index 和样式可能会因为处理其所有父组件的范围而变得棘手。
这就是 Teleport 功能派上用场的地方。我们可以在其逻辑所在的组件中编写模板代码，这意味着我们可以使用组件的 data 或 props。随后将其渲染到 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 的地方，预留一个标签，并提供一个
id或class，让teleport知道是哪个标签。 - 编写一段需要渲染的 HTML 结构，并使用
teleport组件包裹住它。 - 在
teleport标签上使用to属性，指向预留的标签。to的值为提供标签的id或class。
