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