介绍:
require.context('文件路径',深层次查找[Boolean值],匹配的文件后缀)
一共接收三个参数:
1.传入收索目录。
2.一个bollean值,表示是否加载子目录。
3.一个正则表达式返回值:一个或函数,有一个keys属性,这个属性为一个函数,返回值为匹配到的路径数组。
步骤:
*使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。
*然后 context 函数会返回一个导入函数 importFn
*它又一个属性 keys() 获取所有的文件路径
*通过文件路径数组,通过遍历数组,再使用 importFn 根据路径导入组件对象
*遍历的同时进行全局注册即可
具体步骤:
首先在项目的components下新建一个index.js
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属性!