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

我在 template when I tried to make a demo of my icons which are more than 1k icon components so I used something like 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

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

Vue 3 use dynamic component with dynamic imports

import

components

dynamic

vue.js

vuejs3

部分模板

部分剧本

问题