vue3 之 teleport

关于teleport官方文档也有详细说明，只是。。。文档嘛，
描述过于官方，用词过于抽象，生晦难懂。
于是结合自己的看法简单直白的捋一下。
teleport的作用说得直白些就是让组件移动到几乎任意真实dom节点
实际的应用场景官方文档也有举例，我就不多说了

下面请看最直白low B的代码

父组件

<template>
    // 为了更直观多嵌套几个div
    <div>
        <div>
            <div>
                <Son />
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入用到teleport的子组件
import Son from "../components/son.vue";
</script>

子组件

<template>
    <teleport to="body"> // to：要移动到的元素下面，具体规范请自行查阅文档
        <h1>这是将要移动至贴着body节点下的h1</h1>
    </teleport>
    <h1>这个没移动出去</h1>
</template>

如图所示：没有被teleport包裹的元素节点位置正常，在多层div下，而被teleport包裹的元素，如期而至的贴上了body标签

ok,相信你能直观快速的了解到teleport!