在 Vue.js 3 中，Teleport（传送门）是一种特殊的组件，它允许你将内容渲染到 DOM 树中的其他位置，而不受组件层次结构的限制。它提供了一种在组件之外渲染内容的方式，使得内容可以跨越组件边界进行渲染。

语法

<teleport to="目标选择器"><!-- 要传送的内容 -->
</teleport>

  其中，to 属性指定了目标位置的选择器，用于确定要将内容传送到哪个 DOM 元素中。

  通过使用 Teleport，你可以实现以下功能：

1. 在组件之外渲染内容： 通常情况下，组件的内容会在组件自身的模板中进行渲染。但使用 Teleport，你可以将内容渲染到组件之外的任意位置，例如根节点、父组件的特定容器、全局容器等。

2. 跨越组件边界进行渲染： Teleport 允许你将内容从当前组件传送到其他组件的容器中，这样可以实现组件之间的内容共享和交互。这在处理全局的弹窗、对话框、通知、侧边栏等场景时非常有用。

3. 避免手动处理 DOM 操作： 使用 Teleport，你不需要手动进行 DOM 操作来将内容插入到特定的位置。只需使用 Teleport 组件将内容标记为要传送的内容，并指定目标位置的选择器，Vue.js 会自动将内容渲染到目标位置。

示例

<template><div><button @click="toggleModal">打开模态框</button><teleport to="body"><div v-if="showModal" class="modal"><h2>模态框内容</h2><p>这是一个模态框示例。</p></div></teleport></div>
</template><script>
import { ref } from 'vue';export default {setup() {const showModal = ref(false);const toggleModal = () => {showModal.value = !showModal.value;};return {showModal,toggleModal};}
};
</script><style>
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 20px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
</style>

  在上述示例中，点击按钮会触发 toggleModal 方法，该方法切换 showModal 的值。当 showModal 为 true 时，Teleport 中的模态框内容将被渲染到 < body > 元素中。

  通过使用 Teleport，我们可以将模态框的内容直接插入到 < body > 元素中，而不受当前组件的限制。这在处理全局弹窗、对话框或通知等情况下非常有用，因为它们可以在页面的任何位置进行渲染，并且不会受到组件层次结构的干扰。