日常组件的使用，基本都是通过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
<template>
<div class="alert-wrapper">
<p>{{props.title}}</p>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: ''
}
})
</script>
<style scoped>
.alert-wrapper {
width: 200px;
height: 100px;
background: red;
}
</style>
// test.vue
import init from '@/components/Alert/index.js'
let onShow = () => {
init.open({title: '我是标题'})
}
let onClose = () => {
init.close()
}
三、效果
