组件批量注册

128 阅读1分钟

介绍: require.context('文件路径',深层次查找[Boolean值],匹配的文件后缀)
一共接收三个参数:
1.传入收索目录。
2.一个bollean值,表示是否加载子目录。
3.一个正则表达式返回值:一个或函数,有一个keys属性,这个属性为一个函数,返回值为匹配到的路径数组。

步骤:

*使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
*然后 context 函数会返回一个导入函数 importFn
*它又一个属性 keys() 获取所有的文件路径
*通过文件路径数组,通过遍历数组,再使用 importFn 根据路径导入组件对象
*遍历的同时进行全局注册即可

具体步骤:
首先在项目的components下新建一个index.js

image.png

index.js是我们注册的入口文件,components下面的其他文件夹里面的vue文件就是我们准备注册的全局组件。

//index.js
  export default {
    install(Vue) {
     //函数
   var requireComponent = require.context("./",true,/\.vue$/)
   //查看打印结果
   //console.dir(requireComponent.keys())
   var moduleDefault = requireComponent(item).default
   //console.log(moduleDefault)
   Vue.component(moduleDefault.name,moduleDefault)

它是一个数组,里面都是匹配到的路径,然后遍历这个数组

moduleDefault函数接受一个路径,可以读取该路径组件的信息(别忘了后面有个.default), 最后使用Vue.use方法注册组件!!! 以后在这个路径下写的所有vue文件都相当于全局注册了组件,哪里都可以用!


注意

*注册组件需要用到.name属性,所以每一个需要全局注册的组件,都需要有name属性!