【Vue】封装命令式组件

核心代码

import { createApp } from "vue";
import MessageBox from "../components/MessageBox.vue";

export function showMessage(msg, handleClick) {
    const app = createApp(MessageBox, {
        msg,
        onClick: handleClick
    });
    const div = document.createElement("div");
    document.body.appendChild(div);
    app.mount(div);

    return () => {
        app.unmount();
        document.body.removeChild(div);
    }
}

参考资料

• Vue3-createApp()