Vue 3 使用带有动态导入的动态组件

Question

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

部分模板

<component :is="componentName" />

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

部分脚本

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

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

问题

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

Answer 1

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

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 }

});

了解更多关于require.context