vue 实现批量引入组件

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>