vue注册多个组件 前端点击事件没有反应（Vue如何批量注册组件）

最近写项目碰到一个需求    
    
    
    ，左侧树形结构每个节点对应不同类型的表格


     


     


     


，因表格类型各式各样
 




 




 




，树形结构上还带有复选框全选功能

决定每一个表格单组为一个组件进行开发   

   

   

   ，在右侧使用动态组件循环加载展示 

     

     

     

，组件名定义为左侧树节点的唯一id

此时遇到一个问题就是在main-table组件中需要导入很多组件进行注册如下图

在思考及查阅资料后决定使用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后缀的文件就会自动注册



    




    




    




，不需要再一个个导入进行注册

欢迎大家评论














，如有帮助可以关注+收藏                   ，我会经常更新博客



     



     



     



，大家一起讨论学习