Vue Teleport

Teleport 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构之外的 DOM 节点中去。这对于处理那些需要在视觉上脱离组件层级，但逻辑上仍属于该组件的内容非常有用。

最常见的用例是创建模态框 (Modals)、通知 (Notifications) 或工具提示 (Tooltips)。

问题场景

假设你正在开发一个模态框组件。在理想情况下，模态框的按钮（触发器）和模态框本身应该封装在同一个组件中。但是，模态框的 DOM 结构通常需要被渲染在 <body> 元素的直接子节点位置，以避免被父组件的 z-index 或 overflow 样式所影响。

vue

<!-- MyModal.vue -->
<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>

如果这个 <MyModal> 组件被嵌套在某个具有 overflow: hidden 或 z-index 的容器内，那么模态框的定位和显示就会出现问题。

使用 `<Teleport>`

<Teleport> 提供了一个简洁的方式来解决这个问题。我们可以用它来包裹模态框的 HTML，并指定一个“传送”的目标。

<Teleport> 接收一个 to prop，它应该是一个 CSS 选择器字符串或一个实际的 DOM 节点。

vue

<!-- MyModal.vue with Teleport -->
<template>
  <button @click="open = true">Open Modal</button>

  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">Close</button>
    </div>
  </Teleport>
</template>

现在，无论你在哪里使用 <MyModal> 组件，它的模态框部分都会被渲染为 <body> 的子元素，从而避免了 CSS 堆叠上下文的问题。

重要的是，即使 DOM 位置改变了，Teleport 中的内容仍然是 <MyModal> 组件的逻辑子组件。这意味着：

它仍然可以访问 <MyModal> 组件的 data 和 props (例如 open 状态)。
它仍然可以从 <MyModal> 组件中接收 emit 事件。

与组件一起使用

<Teleport> 不仅可以传送原生的 DOM 元素，也可以传送组件。

vue

<Teleport to="#modals">
  <MyModalComponent :is-open="showModal" @close="showModal = false" />
</Teleport>

禁用 Teleport

在某些情况下，我们可能需要根据条件来禁用 Teleport 的功能。例如，在桌面端我们希望组件被传送到 <body>，但在移动端我们希望它保留在组件内部。我们可以通过 disabled prop 来实现这一点。

vue

<Teleport to="body" :disabled="isMobile">
  <!-- content -->
</Teleport>

Teleport 提供了一种干净利落的方式来管理那些需要在 DOM 结构上“越级”的 UI 片段，同时保持其逻辑上的父子关系，是构建复杂 UI 的一个利器。

Vue Teleport ​

问题场景 ​

使用 <Teleport> ​

与组件一起使用 ​

禁用 Teleport ​

Vue Teleport

问题场景

使用 `<Teleport>`

与组件一起使用

禁用 Teleport