vue 如何更好的注册全局组件
通常做法
把组件导出到 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 不能这样注册