vue3之Teleport传送组件
一、前言
Teleport 是 Vue3.x 新推出的功能， 没听过这个词的小伙伴可能会感到陌生；翻译过来是传送的意思，可能还是觉得不知所以，没事下边我就给大家形象的描述一下。
二、Teleport 是什么呢？干嘛用的？
- Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术。
- 主要解决的问题：因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响
Teleport 就像是哆啦 A 梦中的「任意门」，任意门的作用就是可以将人瞬间传送到另一个地方。有了这个认识，我们再来看一下为什么需要用到 Teleport 的特性呢，看一个小例子：
在子组件Header中使用到Dialog组件，我们实际开发中经常会在类似的情形下使用到 Dialog ，此时Dialog就被渲染到一层层子组件内部，处理嵌套组件的定位、z-index和样式都变得困难。Dialog从用户感知的层面，应该是一个独立的组件，从 dom 结构应该完全剥离 Vue 顶层组件挂载的 DOM；同时还可以使用到 Vue 组件内的状态（data或者props）的值。
简单来说就是,即希望继续在组件内部使用Dialog, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中。 此时就需要 Teleport 上场，我们可以用包裹Dialog, 此时就建立了一个传送门，可以将Dialog渲染的内容传送到任何指定的地方。
接下来就举个小例子，看看 Teleport 的使用方式
三、Teleport 的使用
🍉例子
我们希望 Dialog 渲染的 dom 和顶层组件是兄弟节点关系, 在index.html文件中定义一个供挂载的元素:
<body><div id="app"></div><div id="dialog"></div>
</body>
定义一个Dialog组件Dialog.vue, 留意 to 属性， 与上面的id选择器一致：
<template><teleport to="#dialog"><div class="dialog"><div class="dialog_wrapper"><div class="dialog_header" v-if="title"><slot name="header"><span>{{ title }}</span></slot></div></div><div class="dialog_content"><slot></slot></div><div class="dialog_footer"><slot name="footer"></slot></div></div></teleport>
</template>
最后在一个子组件Header.vue中使用Dialog组件, 这里主要演示 Teleport 的使用，不相关的代码就省略了。header组件
<div class="header">...<navbar /><Dialog v-if="dialogVisible"></Dialog>
</div>
...
Dom 渲染效果如下：
可以看到，我们使用 teleport 组件，通过 to 属性，指定该组件渲染的位置与 《div id=“app”> 同级，也就是在 body 下，但是 Dialog 的状态 dialogVisible 又是完全由内部 Vue 组件控制
🍓例子
<template><!-- 插入至 body --><Teleport to="body"><Children></Children></Teleport><!-- 默认 #app 下 --><Children></Children>
</template><script lang="ts" setup>
import Children from './Children.vue'
</script>
