vue 如何更好的注册全局组件

- 通常做法
- [install + use 批量注册](#install + use 批量注册)
- [Vue3 注册全局组件](#Vue3 注册全局组件)
- 参考

通常做法

把组件导出到 main.js，然后 Vue.component(id,component)，一个个注册，缺点：效率不高

改进：把需要全局注册的组件放在数组中导出，然后 forEach 注册。

js 复制代码

import globalComponents from './components'
globalComponents.forEach(component => {
	Vue.component(component.name, component)
})

install + use 批量注册

在 components 的 index.js

js 复制代码

import ZmTable from './table'
const components = [ZmTable]
const allGlobalComponents = {
  install(Vue) {
    try {
      components.forEach(component => {
        if (!component.name) {
          // 跳出 forEach 的技巧
          throw new Error('组件必须提供名字，并且使用大驼峰式命名')
        } else {
          Vue.component(component.name, component)
        }
      })
    } catch (error) {
      console.error(error)
    }
  }
}

export default allGlobalComponents

main.js 中

js 复制代码

import allGlobalComponents from './components'
Vue.use(allGlobalComponents)

Vue3 注册全局组件

在 components 目录的 index.ts 编写注册函数

ts 复制代码

import Add from './Add.vue'
import HelloWorld from './HelloWorld.vue'

// 创建一个类型
import { createApp, defineComponent } from 'vue'
const app = createApp(defineComponent({}))
type App = typeof app //NOTE  声明一个类型

export const components = [Add, HelloWorld]
export const registerComponents = (app: App) => {
  components.forEach(component => {
    // @ts-ignore
    app.component(component.name, component)
  })
}

在 main.ts 中注册:

js 复制代码

import { components } from './components'
// NOTE 注册全局组件,必须在根组件挂载之前
components.forEach(component => {
  // @ts-ignore
  app.component(component.name, component)
})
app.mount('#app')

以插件形式注册:

components index.js

js 复制代码

import MyModel from './MyModel.vue'
const components = [MyModel]
export const registerComponents = app => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

main.js

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import { registerComponents } from './components'
const vue = createApp(App)
vue.use(registerComponents, app)
// registerComponents(vue) // 还可以这样

通过 install 注册组件:

js 复制代码

import MyModel from './MyModel.vue'
const components = [MyModel]
export const registerComponents = {
  install(app) {
    components.forEach(component => {
      app.component(component.name, component)
    })
  }
}

main.js:

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import { registerComponents } from './components'
const vue = createApp(App)
vue.use(registerComponents, app)
// registerComponents(vue) //NOTE 不能这样注册

参考

vue官网 - 编写插件