Vue 3使用动态导入的动态组件
Vue 3使用动态导入的动态组件
提问于 2020-12-20 09:45:35
我使用Vue 3，我有一个动态组件。它需要一个名为componentName的道具，这样我就可以向它发送任何组件。挺管用的，有点。
模板的一部分
<component :is="componentName" />问题是，我仍然需要导入所有可能的组件。如果我将About作为componentName发送，则需要导入About.vue。
脚本的一部分
我导入可以添加到componentName中的所有可能组件。有30个可能的组件，这将是一个很长的名单。
import About "@/components/About.vue";
import Projects from "@/components/Projects.vue";问题
有一种方法可以动态导入所使用的组件吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-20 09:56:32
在我的模板中，我已经遇到了同样的情况，当时我试图制作一个图标演示，这些图标都是1k以上的图标组件，所以我使用了类似于这的东西：
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的信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65378635
复制相关文章
相似问题
腾讯云开发者
