Vue 3 使用动态组件和动态导入 模板的一部分部分脚本

如何解决Vue 3 使用动态组件和动态导入 模板的一部分部分脚本

我使用 Vue 3 并且我有一个动态组件。它需要一个名为 componentName 的道具，因此我可以向它发送任何组件。有点用。

模板的一部分

<component :is="componentName" />

问题是我仍然需要导入所有可能的组件。如果我将 About 作为 componentName 发送，我需要导入 About.vue。

部分脚本

我导入了所有可以添加到 componentName 中的可能组件。有 30 个可能的组件，这将是一个很长的列表。

import About "@/components/About.vue";
import Projects from "@/components/Projects.vue";

问题

有没有办法动态导入使用的组件？

解决方法

当我尝试制作超过 1k 个图标组件的图标演示时，我已经在 template 中遇到了同样的情况，所以我使用了类似 this 的东西：

<script>
import {defineAsyncComponent,defineComponent} from "vue";

const requireContext = require.context(
    "@/components",//path to components folder which are resolved automatically
    true,/\.vue$/i,"sync"
);
let componentNames= requireContext
    .keys()
    .map((file) => file.replace(/(^.\/)|(\.vue$)/g,""));

let components= {};

componentNames.forEach((component) => { //component represents the component name
    components[component] = defineAsyncComponent(() => //import each component dynamically
        import("@/components/components/" + component + ".vue")
    );
});
export default defineComponent({
    name: "App",data() {
        return {
            componentNames,// you need this if you want to loop through the component names in template
         
        };
    },components,//ES6 shorthand of components:components or components:{...components }

});
</script>

详细了解require.context