1回答

张轩

2021-05-19

同学你好 你这个问题问的很好 很深刻，这里我简单描述一下解法，要将我们现在的做法推翻掉。

我们这里是创建的实例（比较简单），但是创建实例，不支持直接传入slot， 这里我们还可以创建 vnode 节点，挂在dom 上，可以实现同样的功能，由于比较复杂，而且推翻之前的做法，所以请看注释，代码如下

import { createApp, createVNode, render } from 'vue'
import Message from './Message.vue'
export type MessageType = 'success' | 'error' | 'default'
const createMessage = (message: string, type: MessageType, timeout = 2000) => {
/// 这里特别注意 createVnode，有三个参数，第三个是 children，可以设定 slot，
// 假如是一个函数直接返回一个 vnode 节点，那就是 default slot，假如是 named slot
// 可以参考文档：https://vue3js.cn/global/h.html
    const messageInstance = createVNode(
        Message, 
        {message,type}, 
        () => createVNode('h1', {}, 'hello')
    )
    const mountNode = document.createElement('div')
    document.body.appendChild(mountNode)
    // 使用内置的 render 挂载到 DOM
    render(messageInstance, mountNode)
    setTimeout(() => {
        // 使用 render null 进行卸载
        render(null, mountNode)
        document.body.removeChild(mountNode)}, timeout
    )
}
export default createMessage

0

0