最近写项目碰到一个需求，左侧树形结构每个节点对应不同类型的表格，因表格类型各式各样，树形结构上还带有复选框全选功能
决定每一个表格单组为一个组件进行开发，在右侧使用动态组件循环加载展示，组件名定义为左侧树节点的唯一id
此时遇到一个问题就是在main-table组件中需要导入很多组件进行注册如下图
Vue如何批量注册组件
在思考及查阅资料后决定使用require.context()批量注册进行优化

require.context(directory, useSubdirectories, regExp)
directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名
例如 require.context("@/views/components", false, /\.vue$/)

应用到项目中，新建index.js文件，/component/index.js，循环注册组件

const importComponentsFn = require.context('./', false, /\.vue$/)
export default {
  install (app) {
    // importComponentsFn.keys()获取所有.vue后缀的文件名数组循环
    importComponentsFn.keys().forEach(key => {
      // importComponentsFn传入文件名，批量导入组件.default获取组件信息
      const component = importComponentsFn(key).default
      // 使用组件名进行注册组件
      app.component(component.name, component)
    })
  }
}

最后在main.js中注册即可，注意每个组件中必须含有name属性，值为树形节点的唯一id

import component from '@/views/public-check/components'
Vue.use(component)

这样只要新建.vue后缀的文件就会自动注册，不需要再一个个导入进行注册

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。