Vue3 Teleport

1. 基本概念

1.1 简单理解

不管是 Vue2 还是 Vue3 中都有内置组件的存在，如 component 内置组件、transition 内置组件等等。内置组件就是官方给我们封装的全局组件，我们直接拿来用就可以了。
在 Vue3 中新增了 Teleport 内置组件，先来看下官方文档是怎么解释的。

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

通俗解释：

• teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。
  假如在父组件中引用了一个子组件，那么渲染成页面后这个子组件 HTML 也是必然被父组件 HTML 包含的。
  但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。这就有点类似与“传送”了。

1.2 典型案例

• 我们使用 Vue 的 UI 组件库的时候，经常会用到[模态框]这个组件。如：使用 Element-plus 的模态框。

<template>
  <el-button @click="dialogVisible = true">打开弹窗</el-button>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="我是弹窗"
    width="30%">
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
export default {
  setup(){
    const dialogVisible = ref(false);
    return {
      dialogVisible
    }
  } 
}
</script> 

• 上段代码中在 App.vue 组件里面引用了 Element-plus的弹窗组件，并且添加了一个 append-to-body 属性。
• 虽然弹窗组件是写在 App.vue 组件里面的，但是渲染出来的结果却是弹窗组件属于 body 节点，这是因为利用了 Element-plus 中弹窗的 append-to-body 属性

2. 基础使用

2.1 传送 DOM 节点

<template>
  <div class="app">
    App组件
    <Teleport to="body">
      <div>我是被 teleport 包裹的元素</div>
    </Teleport>
  </div>
</template>
// to 允许接收值：
// 期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。
// body div #main .name

• < Teleport > 只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。