为了账号安全,请及时绑定邮箱和手机立即绑定

如何异步导入所有Vue3组件?

如何异步导入所有Vue3组件?

慕田峪7331174 2023-08-24 17:29:45
我正在努力让组件发挥作用。我想在数组中包含组件名称,然后将组件作为异步导入,然后以某种方式将变量放入 app.component 中。我已经在这里尝试了大约 6 个小时,但我无法弄清楚。我不想每个组件都有 50x import和 50x app.component并且它不想为我工作我可能错过了一些明显的东西。不幸的是,我不太擅长 JS。main.jsimport { createApp, defineAsyncComponent } from "vue";import App from "./App.vue";import router from "./router";var subComponents = new Array([  "test",   "test2"]);  subComponents.forEach(subComponent => {  subComponent = defineAsyncComponent(() =>    import(`@/components/sub/${subComponent}.vue`)         )});const app = createApp(App);app.use(router);app.component(subComponent, subComponents);app.mount("#app");它报告这些问题无法解析组件:测试无法解析组件:test2
查看完整描述

1 回答

?
一只甜甜圈

TA贡献1836条经验 获得超5个赞

我认为您需要的是在循环内单独注册每个组件,如下所示:


子组件.js:


const subComponents = ['test', 'test2'];


export { subComponents }

main.js:


import { createApp, defineAsyncComponent } from 'vue';

import App from './App.vue';

import router from './router';

import { subComponents } from './subComponents';


const app = createApp(App);


subComponents.forEach(subComponent => {

    const component = defineAsyncComponent(() => import(`@/components/sub/${subComponent}.vue`));


    app.component(subComponent, component);

});


app.use(router);

app.mount('#app');

目前,您将一个不存在的subComponent变量作为第一个参数传递给单个实例,app.component并将数组作为第二个参数。


app.component应用于单个组件,第一个参数是组件的名称,第二个参数是组件本身。


因此,如果您循环遍历名称数组并使用该名称导入每个组件,然后使用该名称和导入的组件注册一个组件,它们将在您的整个应用程序中可用。


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 94 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信