1.目录示例
2.被引入组件示例
注意:必须要有name
<template>
<div>Hkmxdy</div>
</template>
<script>
export default {
name: 'Hkmxdy',
data() {
return {}
},
computed: {
query() {
return { ...this.$route.query } || {}
}
}
}
</script>
3.全局注册方法
/**
* 全局组件自动注册
* 文件夹内至少保留一个文件名为 index 的组件入口,例如 index.vue
* 如果组件是通过 js 进行调用,则确保组件入口文件为 index.js
*/
import Vue from 'vue'
const searchCom = require.context('@/views/search/@components', true, /index.(vue|js)$/)
const loanCom = require.context('@/views/loan/@components', true, /index.(vue|js)$/)
const register = componentsContext => {
componentsContext.keys().forEach(file_name => {
// 获取文件中的 default 模块
const componentConfig = componentsContext(file_name).default
if (/.vue$/.test(file_name)) {
Vue.component(componentConfig.name, componentConfig)
} else {
Vue.prototype[`$${componentConfig.name}`] = componentConfig
}
})
}
register(searchCom)
register(loanCom)
3.1.require.context() 是什么
1.webpack的api
2.获取一个特定的上下文,实现自动化导入模块
3.解决前端批量引入组件的问题
4.遍历文件夹中的指定文件,自动导入,无需使用import一个一个导入
3.2.require.context() 用法
参数
directory:说明需要检索的目录 ,你要引入文件的目录
useSubdirectories:是否要查找该目录下的子级目录
regExp:匹配文件的正则表达式,匹配要引入的文件 ,一般是文件名
require.context(directory,useSubdirectories,regExp)
返回的函数
函数有三个属性:resolve 、keys、id
resolve: 是一个函数,他返回的是被解析模块的id ,接受一个参数request。
keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成
id:是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
function webpackContext(req) {return __webpack_require__(webpackContextResolve(req))};
4.使用全局注册方法
main.js中添加下面这句话
import '@/components/autoRegister'
5.使用
可以单独引用
<template>
<Hkmxdy />
</template>
export default {
name: 'Home',
data() {
return {}
},
}
</script>
也可以选择动态使用组件,通过component的is来规定使用的那个组件,这样就可以将使用哪个组件放到query里面来表示啦
<template>
<component :is="query.type" />
</template>
<script>
export default {
name: 'Home',
data() {
return {}
},
computed: {
query() {
return { ...this.$route.query } || {}
}
}
}
</script>