Vue3 Teleport

为什么需要 Teleport？

以 Dialog 组件为例，通常需要在一个组件中引入 Dialog 组件。然而，有时一部分逻辑属于 Dialog 所在的组件中，从技术角度来看，最好将这一部分移动到根节点之外的位置。

另外一个问题， 当 Dialog 组件使用 position: absolute  相对于它所在的组件进行绝对定位时，样式变得十分混乱。

使用 Teleport

teleport 意为传送，它提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML。

Step1: 创建传送的目标节点，此处为 index.html 中的和根节点同级的 id 为 model 的节点。

...
<div id="app"></div>
<div id="model"></div>
...

Step2: 使用 <teleport> 将需要被传送的组件包裹起来，   此处将 Dialog 包裹。

<template>
  <teleport>
    <div>I'am a Dialog.</div>
  </teleport>
</template>

Step3：指定 telport 的 to  属性，告诉它要传送到 id 为 model 的节点。

<template>
  <teleport to="#modal">
    <div>I'am a Dialog.</div>
  </teleport>
</template>

接下来无论在哪个组件中使用该 Dialog 组件，都会将它渲染到 id 为 model 的节点下。这就实现了传送的功能。

Component.vue

<template>
  <div>
    <Dialog></Dialog>
  </div>
</template>

<script>
import Dialog from "./components/Dialog.vue";
export default {
  components: {
    Dialog
  },
}
</script>

值得注意的是，即使在不同的地方渲染 Dialog，它仍将是 Component.vue 的子级，并将从中接收 props。还可以将多个 teleport 挂在到同一个目标节点上，挂载的顺序是从前到后，即先挂载的位于前面。