三、组件的注册与转换

概述

• 每个组件都可以作为插件，注册到应用上
• 在工具包中创建文件并定义两个方法 makeInstaller、withInstall
  • makeInstaller：创建安装器
  • withInstall：设置组件为插件

import type { App, Plugin } from 'vue'
import { each } from 'lodash-es'

// 定义单文件组件为插件类型
// 即把单文件组件当成是一个插件，可被安装使用
type SFCWithInstall<T> = T & Plugin

// 把传入的所有组件当成插件进行安装
export function makeInstaller(components: Plugin[]) {
  const install = (app: App) =>
    each(components, (c) => {
      app.use(c)
    })

  return install
}

// 将传入的组件转换成插件
// 即给组件添加install方法
// 当使用app.use(component)时会自动调用组件的install方法
export const withInstall = <T>(component: T) => {
  ;(component as SFCWithInstall<T>).install = (app: App) => {
    const name = (component as any)?.name || 'UnnamedComponent'
    app.component(name, component as SFCWithInstall<T>)
  }
  return component as SFCWithInstall<T>
}