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>

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/16566317.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！