vue3.2实现API声明式组件

日常组件的使用，基本都是通过import的方式导入。但是有些时候也需要通过API方法的形式调用，效率会更高；如Element-ui的Message消息提示组件等。

一、原理
通过h()函数把传入的内容渲染成虚拟节点(Vnode)，再通过render()函数把虚拟节点挂载到body标签里。

二、实现

// index.js
import Alert from './index.vue'
import {
    h,
    render
} from 'vue'

let initData = null
const container = document.createElement('div')

const init = {
    open: (data) => {
        if (!initData) {
            console.log('data: ', data);
            // 把组件转行为虚拟dom节点 第二个参数为传参
            const VNode = h(Alert, data)
            document.body.appendChild(container)
            initData = container
            // 把虚拟dom节点插入到div
            render(VNode, container)
        }
    },
    close: () => {
        if (initData) {
            document.body.removeChild(container)
            initData = null
        }
    }
}

export default init

// index.vue

// test.vue
import init from '@/components/Alert/index.js'
let onShow = () => {
    init.open({title: '我是标题'})
}
let onClose = () => {
    init.close()
}

三、效果