Vue 3将动态组件与动态导入配合使用

延斯·特内尔

我使用Vue 3，并且具有动态组件。它需要一个prop，componentName因此我可以将任何组件发送给它。可行，有点。

模板的一部分

<component :is="componentName" />

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

脚本的一部分

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

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

题

有没有一种方法可以动态导入所使用的组件？

布萨吉拉·卜拉欣（Boussadjra Brahim）

当我尝试对超过1k个图标组件的图标进行演示时，我已经在模板中遇到了相同的情况，因此我使用了以下方法：

<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的更多信息

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。