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

Question

我正在努力让组件发挥作用。我想在数组中包含组件名称，然后将组件作为异步导入，然后以某种方式将变量放入 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

Answer 1

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

子组件.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应用于单个组件，第一个参数是组件的名称，第二个参数是组件本身。

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