vue如何批量注册组件

在components目录下的index.js文件中导入需要注册的组件

import pageTools from './pageTools/index.vue'
import uploadExcel from './uploadExcel/index.vue'
import imageUpload from './imageUpload/index.vue'

export default {
  install(Vue) {
    Vue.component('pageTools', pageTools)
    Vue.component('uploadExcel', uploadExcel)
    Vue.component('imageUpload', imageUpload)
  }
}

在main.js中通过Vue.use()可以快速注册组件

// 全局注册组件
import component from '@/components/index'
Vue.use(component)

如果有十个二十个组件需要使用，那么就要在install方法中注册十次二十次。这个时候我们就可以使用webpack的语法批量注册组件。

import Vue from 'vue'
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
const requireComponent = require.context('./', true, /\.vue$/)
console.log(requireComponent.keys()，1111)
requireComponent.keys().forEach((item) => {
 console.log(requireComponent(item)) 
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default
  Vue.component(defaultObj.name, defaultObj)
})

 

 

注意使用批量注册组件的时候，一定一定要在组件内部使用name属性命名，不然会报错！！！因为组件那么名字会作为组件名来进行注册。