vue3通过h()和render实现函数式构建组件

以构建一个confirm组件为例

在vue文件同级创建index.ts导出构建函数，如下

import { h, render } from 'vue'
import ConfirmComponent from './index.vue'
export const confirm = (
  title: string,
  content?: string,
  cancelText?: string,
  confirmText?: string
): Promise => {
  return new Promise((resolve, reject) => {
    // 如果只传入一个参数，将该值赋予content
    if (title && !content) {
      content = title
      title = ''
    }
    // 销毁组件，把渲染的vnode去掉
    const close = (): void => {
      render(null, document.body)
    }
    const confirmHandle = (): void => {
      resolve()
    }
    const cancelHandle = (): void => {
      reject()
    }
    const vnode = h(ConfirmComponent, {
      title,
      content,
      cancelText,
      confirmText,
      cancelHandle,
      confirmHandle,
      close
    })
    render(vnode, document.body)
  })
}

调用时

confirm(
    'hdjfgdsjh',
    'nfsjakhfishdgfgfdhgfdhgfdhsgfjghfjhfgjhgfjfdghfgdfhgfhgj',
    '不了不了',
    '要的要的'
  )
    .then(() => {
      console.log('点击确定')
    })
    .catch(() => {
      console.log('点击取消')
    })