作用：一个 Webpack 提供的 API 方法，通过 require.context() 函数可以获取一个上下文，通常用来简化大量频繁的引入组件操作。
require.context() 接收三个参数：
directory：要查找的目录路径isFindSub?：是否查找子目录regExp：要匹配的文件正则表达式
const req = require.context('./component',true,/\.vue$/)
过程：require.context() 执行后会返回一个 req 对象，该 req 对象中存在有一个 keys() 方法成员，
keys() 文件路径数组
作用：它会返回一个 require.context() 方法在指定目录下查找到的所有文件路径数组。
const req = require.context('./component',true,/\.vue$/)
console.log(req.keys())
// ['./component/SvgIcon.vue','./component/Form/Login.vue','./component/Channel.vue'...]
req.keys().forEach(item => {
...
})在拿到所有待注册组件的文件路径之后，便可以传给 req 对象本身进行一个 import 解构导出操作。
一、定义2个组件
scr/components/ComponentsA/index.vue
<template>
<div>A组件</div>
</template>
<script>
export default {
name: 'ComponentA'
}
</script>scr/components/ComponentsB/BBB/BBBB/index.vue
<template>
<div>B组件</div>
</template>
<script>
export default {
name: 'ComponentB'
}
</script>二、局部使用这两个组件
<template>
<div id="app">
<ComponentA />
<ComponentB />
</div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB/BBB/BBBB'
export default {
components: { ComponentA, ComponentB }
}
</script>三、全局注册组件
如果这2个组件是基础性的组件，项目中好多地方都要用到，可以注册成全局组件
src/requireAllComponents.js
import Vue from 'vue'
const componentsContext = require.context('@/components', true, /index.vue$/) // true表示递归查找 正则匹配index.vue文件
componentsContext.keys().forEach(item => {
const componentConfig = componentsContext(item).default
Vue.component(componentConfig.name, componentConfig) // 全局注册组件
})main.js
import './requireAllComponents'
此时，便不再需要在每个组件中都引入这种基础组件了
到此这篇关于vue require.context全局注册组件的文章就介绍到这了,更多相关vue require.context全局注册组件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » vue require.context全局注册组件的具体实现
发表评论 取消回复