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

本文主要是介绍vue 如何更好的注册全局组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

- 通常做法
- install + use 批量注册
- Vue3 注册全局组件
- 参考

通常做法

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

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

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

install + use 批量注册

在 components 的 index.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 中

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

Vue3 注册全局组件

在 components 目录的 index.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-ignoreapp.component(component.name, component)})
}

在 main.ts 中注册:

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

以插件形式注册:

components index.js

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

main.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 注册组件:

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

main.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 不能这样注册