vue3 组件函数式调用

做一个消息提示框组件，封装成vue实例，然后函数式调用

1、先准备一个想要做的提示组件文件Message.vue        

2、新建Message.js文件，内容是提供一个能够显示Message组件的函数

3、挂载到全局指令上

 

准备一个DOM容器，里面装消息提示组件；然后将组件编译为虚拟DOM，利用render函数渲染到DOM容器里。

// 导入消息提示组件
import { createVNode, render } from 'vue'
import Message from 'message.vue'

// 装载提示消息组件的DOM容器
const div = document.createElement('div')
div.setAttribute('class', 'message-container')
document.body.appendChild(div)

// 定时器标识
let timer = null

export default ({ type, text }) => {
  // 将消息提示组件编译为虚拟节点(DOM节点)
  // createVNode(组件, 属性对象(props))
  const vnode = createVNode(Message, { type, text })
  // 将虚拟节点渲染到DOM容器中
  // render(虚拟节点，DOM容器)
  render(vnode, div)
  // 3s后销毁
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 2000)
}

然后全局注册

export default {
  install (app) {
    // 定义指令
    defineDirective(app)
    app.config.globalProperties.$message = Message
  }
}

使用的时候在文件内先引入

import Message from '@/components/library/Message'

然后使用

 Message({ type: 'error', text: '登录失败' })