首先 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的新apiconst components = import.meta.glob("./**.vue");// 遍历组件模块实现自动注册for (const [path, component] of Object.entries(components)) {// 把文件名称当作组件注册的 nameconst 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)
