vue 动态引入组件、批量引入组件(vue2,vue3)

vue2

批量全局引入：

import Vue from "vue"
const components = require.context(
'./', //组件所在目录的相对路径
false, //是否查询其子目录
/[A-Z]\w+\.(vue|js)$/ //匹配组件文件名的正则表达式
)
components.keys().forEach(fileName=>{
// 获取文件名
var names = fileName.split("/").pop().replace(/\.\w+$/,"");
// 获取组件配置
const comp = components(fileName);
// 若该组件是通过"export default"导出的，优先使用".default"，
// 否则退回到使用模块的根
Vue.component(names,comp.default || comp);
})

批量局部引入：

vue3

批量引入：

批量导入组件，在模板中利用动态组件component,根据key值渲染组件，注意这里的key类似‘./components/Component1.vue’这样的形式，如果需要去掉路径可以用函数处理再放入componentList

动态引入：