vue3动态创建组件，挂载到dom 节点上，修复版本

// 将组件挂在到节点上！
const creatComp  = (comp:Component,prop:Object)=>{
    var app = createApp(comp,{
        ...prop
    })
    var divEle = document.createElement("div")
    // 让我们节点挂在到一个dom元素上
    document.body.appendChild(divEle)
    app.mount(divEle)
    // 解除绑定的时候
   onUnmounted(()=>{
       app.unmount(divEle)
       document.body.removeChild(divEle)
   })
}

使用：

这样就可以创建任何组件， 并且挂载到dom 节点上了，但是还是无法交互！

这个时候，就要思考， 若是这个动态的组件是自己处理逻辑，就不需要交互，如果需要交互呢，

这个时候，我们就考虑传递方法进去？ 或者用 emit ??

这个我们都要考虑，先 实现了再说，然后继续思考

1,自己处理

<template>
    <!--  最终呢，我们的组件就会挂在到#dialog 一个documentElement -->
    <teleport to ="#dialog" v-if ="show1">
        <div  class="fixed-top">
              <h2>i am a dialog...</h2>
              <button  @click.prevent = "closeTag" class="btn btn-primary">close</button>
        </div>
      
       
    </teleport>
</template>

<script lang="ts">
import Vue from vue
import {defineComponent,onUnmounted,watch,reactive
,toRefs} from vue

export default defineComponent({
    name:"dialog",
    props:{
        show:{
            default:false,
            type:Boolean
        }
    },
    setup(prop,context){
        const mountEle = document.createElement("div");

       const data = toRefs(reactive({
            show1:false
        }));
        data.show1.value = prop.show;

        mountEle.id = "dialog";
        // 挂在到body 上
        document.body.appendChild(mountEle)
        onUnmounted(()=>{
            // 当组件消亡的时候，我们就清空节点
            document.body.removeChild(mountEle)
        })
        const closeTag = ()=>{
            data.show1.value = false;
        }
        return {
            ...data,
            closeTag
        }
    }
})
</script>

<style>

</style>

当我们点击关闭按钮时就自己关闭得了，如果需要交互呢？我们用emit?

这个我没法用，因为现在是动态创建的，咋接收，我现在不知道！

行，暂时写到这里，回头我们继续