vue动态导入组件并使用指定组件
必须使用 vue自带defineAsyncComponent的api
<template> <!-- 默认 动态引用组件 --> <div> <component :is="Component"></component> </div> </template> <script> import { defineAsyncComponent } from "vue" export default { data() { return { Name: 'Default', Component: null // 初始化为 null }; }, created() { this.loadComponent(); // 在组件创建时加载组件 }, methods: { //异步动态载入组件 async loadComponent() { // 动态导入全部组件地址 const comList = await import.meta.glob("/src/template/**/**/**.vue"); // 使用指定组件 this.Component = defineAsyncComponent(comList[`/src/template/${this.Name}/Home/index.vue`]) } } } </script>
648 Views