在做动态表单或者某些组件化的业务时，会自定义大量组件。如何批量注册和使用

利用 require.context 读取文件, 形成列表，直接全部放进 component 里。然后用 component 动态组件去挂载

require.context()方法是 webpack 的一个 api，主要功能是自动导入文件，当导入文件过多时，使用该方法可以统一导入，避免导入不同文件时多行书导入语句，该函数接受三个参数，参数说明如下： require.context(path, isTraverseSubfolders, regExp)

path: String 类型，读取文件的路径. isTraverseSubfolders：Boolean 类型，是否遍历文件的子目录 regExp：RegExp 类型，匹配文件的正则

文件目录

• src

  • formComponents

    • Input //组件

  index.vue

  index.js

• 下面是注册完之后在一个组件内用的情况

//index.js
//读取匹配所有formComponents的vue组件，名字前面加上form，然后全部导出
const files = require.context('./formComponents', true, /.vue$/)
const switchList = {}
files.keys().forEach(key => {
  switchList[`form${key.replace('.vue', '').replace(/\.\//g, '')}`] = files(
    key
  ).default
})
export default {
  ...switchList
}

<template>
  <!-- 使用注册好的组件，也可以用动态组件去动态使用 -->
  <form-input />
</template>

<script>
  //导入打包好的组件
  import components from './dynamicForm'
  export default {
    //全部注册
    components: components,
    props: {},
    data() {
      return {}
    },
    created() {
      console.log('components', components)
    },
    methods: {}
  }
</script>

• 下面是注册全局组件，所有组件内都能直接使用的

import Vue from 'vue'
const files = require.context('./', true, /.vue$/)
const components = () => {
  files.keys().forEach(key => {
    Vue.component(
      `${key.replace('.vue', '').replace(/\.\//g, '')}`,
      files(key).default
    )
  })
}

export default components

// main.js
components()