vue2和vue3 通过函数调用一个组件

实现一个简单的弹窗组件：

1. vue2 函数式组件写法，通过extend方法：
   创建ui.vue文件，存放我们的组件，如下：

同级目录下创建一个index.js，内容如下;

import UI from "./ui.vue"
import Vue from "vue"
function openDialog() {
    let install = null
    return new Promise((resolve, reject) => {
        const UIconstructor = Vue.extend(UI)
        install = new UIconstructor({
            methods: {
                close(e) {
                    document.body.removeChild(install.$el)
                    resolve(e)
                },
            },
        }).$mount();
        document.body.appendChild(install.$el)
    })
}
export default openDialog

在其他页面直接引入调用openDialog即可

2. vue3中实现，ui.vue不变，index.js修改如下：

import UI from "./ui.vue"
import { createApp } from "vue"

export default function openDialog() {
  // 创建一个节点，并将组件挂载上去
  const mountNode = document.createElement("div")
  document.body.appendChild(mountNode)
  const app: any = createApp(UI, {
    close: () => {
      app.unmount()
      document.body.removeChild(mountNode)
    },
  })
  app.mount(mountNode)
}