首先 vue 动态加载组件使用的是 component 标签，并通过设置组件的is 属性来指定要渲染的组件。例如：
<component :is="currentComponent"></component>
其中，currentComponent 是一个变量，它的值可以是以下几种：
已注册的组件名
HTML 标签名称
导入的组件对象
使用方法：
父组件
<template>
<component :is="componentName" :num="num" @changeNum="changeNum"></component>
</template>
<script setup>
import { ref, onMounted } from "vue";
const componentName = ref(null);
const num = ref(0);
onMounted(async () => {
// 异步加载组件
const moduleName = 'TestOne';
loadModule(moduleName);
setTimeout(() => {
loadModule('TestTwo');
}, 3000);
});
const loadModule = async (moduleName) => {
// import 后面是文件路径
const module = await import(`./module/${moduleName}.vue`);
componentName.value = module.default;
}
const changeNum = () => {
num.value++;
}
</script>
子组件TestTwo.vue
<template>
<div>
Test2{{num}}
<button @click="changeNum">加</button>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
defineProps({
num: Number
});
const emit = defineEmits(["changeNum"]);
const changeNum = ()=>{
emit("changeNum");
}
</script>
这时我们发现每次加载组件都需要 import 去重新加载，比较浪费性能，我们可以采用在 main.js中集中一次全局注册组件。下面介绍的方法4
// 引入全局注册组件
import globalComponent from './register.js'
createApp(App).use(ElementPlus).use(globalComponent).mount('#app')
这样我们就可以直接这样用
全局注册组件有多种方法：
1、在main.js中
// 引入所有需要注册的全局组件
import TestOne from '@/components/module/TestOne.vue'
import TestTwo from '@/components/module/TestTwo.vue'
//定义一个数组结构
const components = [
{ name: 'TestOne', component: TestOne },
{ name: 'TestTwo', component: TestTwo },
];
//遍历数组进行循环注册
components.forEach(component => {
Vue.component(component.name, component.component);
});
2、利用vue的插件模式
1）在register.js中
// 引入所有需要注册的全局组件
import TestOne from './TestOne.vue'
import TestTwo from './TestTwo.vue'
const globalComponents = [TestOne, TestTwo];
export default {
install (Vue) {
globalComponents.forEach(component => {
// 这里用的是组件里面的name
// 如果引入的组件没有写name，会报错 ： vue.esm.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
Vue.component(component.name, component);
});
}
}
2）在main.js中
// 引入全局注册组件
import globalComponent from './register.js'
Vue.use(globalComponent)
3、使用自动化导入，请注意文件路径
在main.js中
const componentContext = require.context('@/components/module', true, /\.vue$/);
componentContext.keys().forEach(fileName => {
//获取当前遍历的组件
const componentConfig = componentContext(fileName);
//获取当前组件的文件名称
const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');
//注册组件
Vue.component(componentName, componentConfig.default || componentConfig);
});
上述代码会自动匹配components/module目录下以.vue为后缀的组件文件，并自动注册为全局组件
4、使用Vue插件和组件自动化注册（推荐）
1）在register.js中
const VueAutoRegister = {
install (Vue) {
//获取所有的vue文件
const requireComponent = require.context('@/components/module', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
//获取当前遍历的组件
const componentConfig = requireComponent(fileName);
//获取当前组件的文件名称 vue文件中声明的name属性 || 文件名称
const componentName = componentConfig.default.name || fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
//把文件名称当成组件名称，全局注册
Vue.component(componentName, componentConfig.default || componentConfig);
});
}
};
export default VueAutoRegister;
2）在main.js中
// 引入全局注册组件
import globalComponent from './register.js';
Vue.use(globalComponent)
5、vite+vue3的方式：
1）在register.js中
import { defineAsyncComponent } from "vue";
const VueAutoRegister = {
install:(app) => {
// import.meta.glob是vite的新api
const components = import.meta.glob("./**.vue");
// 遍历组件模块实现自动注册
for (const [path, component] of Object.entries(components)) {
// 把文件名称当作组件注册的 name
const componentName = path.slice(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
// 通过 defineAsyncComponent 异步导入指定路径下的组件
app.component(componentName, defineAsyncComponent(component));
}
}
}
export default VueAutoRegister;
2）在main.js中
// 引入全局注册组件
import globalComponent from './register.js'
const app = createApp(App)
app.use(globalComponent)
