createVNode 和 render 组合使用 实现使用函数可以调用组件的逻辑

//创建一个js文件
// 实现使用函数调用xtx-message组件的逻辑
import { createVNode, render } from 'vue'

import XtxMessage from './index.vue' // 自己封装的组件

export function Message ({ type, text }) {
  // 生成vnode
  const messageVNode = createVNode(XtxMessage, { type, text }) // 将自己封装的组件生成一个虚拟dom
  // 动态生成一个容器
  const divContainer = document.createElement('div')
  // 添加到容器中
   render(messageVNode, divContainer)  //将虚拟的dom变为真正的dom
 document.body.appendChild(divContainer) // 将真正的dom添加到dom树中

    // 1.5s后自动删除dom
  setTimeout(() => {
    render(null, divContainer)
  }, 1500)
}

//使用
import {Message} from '@/components/Message'
Message({ type: 'error', text: '登录失败' })