vue3中的createApp函数

创建一个应用实例。

function createApp(rootComponent: Component, rootProps?: object): App

详情信息：

第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。

我们在vue3中man.ts中常见的写法如下：

createApp(App).use(router).use(pinia).mount('#app')

若我们想使自己使用一个弹框，定义如下：

import { createApp } from "vue";
const MessageBox = {

    props:{
        msg:{
            type:String,
        }
    },
    render (ctx){
        const {$props,$emit} = ctx;
        return (
        <div>
        <div>{$props.msg}</div>
        <button click={$emit('onClick')}>关闭</button>
        </div>
        )
    }
}
export function showMsg (msg,onClick ){
    console.log('msg', msg)
const div = document.createElement('div');

document.body.appendChild(div);
// 渲染组件到页面上
const app = createApp(MessageBox,{
msg,
onClick(){
    onClick(()=>{
        app.mount();
        div.remove();
    })
},

})
app.mount(div);
}

使用

showMsg('好好学习',(close)=>{
					close();
				});