vue3__Teleport

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

基本用法：

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

注意：传送的位置必须在被传送的dom之前渲染完毕

?父

<template>
    <div class="home">
        <div class="main">
            我是main
        </div>
        <div id="container">
            我是container
        </div>

        <A></A>
    </div>
</template>

<script setup>
import A from '../components/A.vue'
let str = ref('xxx')
</script>

<style lang="scss">
.home{
    font-size: 32px;
    line-height: 50px;
}
</style>

?子

<template>
    <div class="A">
       <h1>A组件</h1> 
       <div class="aaa">

       </div>
       <teleport to=".main">
            <div>
                这是传送
            </div>
       </teleport>
       <teleport to=".aaa">
            <div>
                这是传送2
            </div>
       </teleport>
    </div>
</template>

<script setup>

</script>

<style lang="scss">
.A{
    font-size: 26px;
}
</style>