Vue小技巧-公共组件开发

我们会遇到很多类似于这样的场景，公共组件弹窗，点击确定/取消按钮会执行某个函数。一般做法是同props把弹窗一些value,function注入进去，然后子组件emit执行一下，但是这样有一个问题，就是太麻烦了。本文通过动态挂载组件的 方式去解决这个需求，废话少说，直接上代码。

项目结构：

首先，我们先封装一下动态挂载方法：
mountComponent.ts

import {
    App, Component, createApp } from 'vue'

function isInDocument(element: HTMLElement) {
   
    return document.body.contains(element)
}

export function mountComponent(RootComponent: Component, className: string, singleton?: boolean) {
   
    const root = document.createElement('div')
    root.className = (className || '') + '-wrap'

    const app: App<Element> = createApp(RootComponent)
    const instance: any = app.mount(root)

    if (singleton) {
   
        if (!isInDocument(root)) {
   
            document.body.appendChild(root)
        } else {
   
            document.body.appendChild(root)
        } 
    }    

    return {
   
        instance,
        unmount(