Vue 页面批量导入其他组件

<template>
  <div>
    <template v-for="(item) in names">
      <component :is="item" :key="item" />
    </template>
  </div>
</template>
<script>
// 可行了
import path from 'path'
const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)// param1:路径；param2: 是否搜索子文件夹：param3: 文件类型，可正则
const dialogs = {}
const names = []
// 组件导入
files.keys().forEach((key) => {
  const name = path.basename(key, '.vue')
  names.push(name)
  /**
    * path.basename获取vue文件名，也可以用正则表达式匹配
    * key.replace(/^\.\/(.*)\.\w+$/, '$1')
    **/
  dialogs[name] = files(key).default || files(key)
})

export default {
  name: 'Dialogs',
  components: dialogs,
  data() {
    return {
      names: names
    }
  }
}
</script>

  <style lang="scss" scoped />

1. 把待导入的组件文件放到同一个目录下，或者精通正则的可以 const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)// param1:路径；param2: 是否搜索子文件夹：param3: 文件类型，可正则在这用正则来过滤
2. 用 v-for进行遍历，标签记得用<component>