vue3.x 传送门 teleport 的用法，很简单吆！

minDialog.vue

<template>
    <!--  最终呢，我们的组件就会挂在到#dialog 一个documentElement -->
    <teleport to ="#dialog" v-if ="isshow">
        <h2>i am a dialog...</h2>
    </teleport>
</template>

<script lang="ts">
import Vue from 'vue'
import {defineComponent} from 'vue'

export default defineComponent({
    name:"dialog",
    props:{
        isshow:{
            default:true,
            type:Boolean
        }
    },
    setup(){
        return {

        }
    }
})
</script>

<style>

</style>

然后在 index.html

 

然后在我们的App.vue

最后使用就行了

运行，刚开始不会显示，因为 isshow = false ,所以我们修改下：

 

哎呀 ，我去，咋显示到最后了，呢，实际上， min-Dialog 最终会移动到#dialog dom 节点上，所以显示到了最后

最终的话，它会挂在到这个节点上！