vue页面批量注册组件

原创
08/14 17:50
阅读数 33

 一般情况下我们是 import A from A.vue,如果组件特别多的情况就比较麻烦,可以通过reqire.content批量注册组件

require.context函数接受三个参数

  1. directory {String} -读取文件的路径

  2. useSubdirectories {Boolean} -是否遍历文件的子目录

  3. regExp {RegExp} -匹配文件的正则

新建requireComponents.js文件 

let webpackComponents = require.context("../components",true,/(\.vue)$/)

let componentsObj = {}

webpackComponents.keys().forEach(key => {
    // console.log(key)
    var index = key.lastIndexOf("/")
    let componentName = key.substring(index+1,key.length).replace(/.vue$/,"")
    // console.log(componentName)
    let conponentConfig = webpackComponents(key)
    componentsObj[componentName] = conponentConfig.default
});

export default componentsObj

组件中使用方法

import   componentsObj   from   "@/utils/requireComponents.js" ;
export default {
  name: "home",
  components: componentsObj,
  data(){
    return {}
  }
}
注意组件的名字必须唯一,不能有重复

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部