vue页面批量引入组件的操作代码
短信预约 -IT技能 免费直播动态提醒
<template>
<div>
<template v-for="(item) in names">
<component :is="item" :key="item" />
</template>
</div>
</template>
<script>
// 可行了
import path from 'path'
// require.context(param1,param2,param3) param1:路径; param2: 是否搜索子文件夹; param3: 文件类型，可正则
const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)
const dialogs = {}
const names = []
// 组件导入
files.keys().forEach((key) => {
// 获取文件名 法一
// var name = fileName
// .split('/')
// .pop()
// .replace(/\.\w+$/, '');
// 获取文件名 法二
const name = path.basename(key, '.vue')
names.push(name)
dialogs[name] = files(key).default || files(key)
})
export default {
name: 'Dialogs',
components: dialogs,
data() {
return {
names: names
}
}
}
</script>
<style lang="scss" scoped />知识点：
require.context(param1,param2,param3)
- param1:路径;
- param2: 是否搜索子文件夹;
- param3: 文件类型，可正则
path.basename(path[, ext])
方法会返回 path 的最后一部分。 尾部的目录分隔符会被忽略
- path ：string
- ext ：string 可选的文件扩展名。
path.basename('/目录1/目录2/文件.html'); // 文件.htmlpath.basename('/目录1/目录2/文件.html', '.html'); // 文件到此这篇关于vue页面批量引入组件的文章就介绍到这了,更多相关vue页面批量引入组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
