什么是 <Teleport>?

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

为什么要有 <Teleport>?

• 在 Vue 组件渲染时，子组件的 DOM 结构一般都是在父组件里面的。
• 但是在有一些业务场景中，子组件需要渲染在全局或者其他的非父组件内的特定位置（e.g 模态框组件 <Modal>、消息提示组件 <Message>, 通知消息组件 <Notification>），这个时候我们就应该需要有一个高阶组件可以帮助我们完成这样的工作。
• <teleport>(传送) 组件就是可以帮我们把子组件『传送』到我们想要渲染的位置

<Teleport>的基本用法：

使用步骤：

1. 在子组件中使用 <Teleport>包裹住需要传输到外面的内容
2. 在 <Teleport>中传递 propto属性告诉 <Teleport> 组件需要将内容传输的位置
3. 调用子组件

代码示例：

1. 子组件声明

<script>
	import { defineComponent } from 'vue';
  
  export default defineComponent({
    data() {
      return {
        open: false
      }
    }
  });
</script>

<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>

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

2. 父组件调用：

<div class="outer">
  <h3>Tooltips with Vue 3 Teleport</h3>
  <div>
    <MyModal />
  </div>
</div>

补充 - 关于 to prop

• <Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”
• <Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport> 之前先挂载该元素。

<Teleport>搭配组件使用：

<Teleport> 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 <Teleport> 包含了一个组件，那么该组件始终和这个使用了 <teleport> 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。

这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

禁用 <Teleport> (官网案例)

在某些场景下可能需要视情况禁用 <Teleport>。

举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况。

<Teleport :disabled="isMobile">
  <!-- ... -->
</Teleport>

多个 Teleport 共享目标 (官网案例)

一个可重用的模态框组件可能同时存在多个实例。

对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染结果：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>