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

Question

我正在尝试使组件正常工作。我想在数组中有组件名称，然后将组件作为异步导入，然后以某种方式将变量放入 app.component。我已经在这里尝试了大约 6 个小时，但我无法弄清楚。我不希望每个组件都有 50x import 和 50x app.component 并且它不想为我工作我可能遗漏了一些明显的东西。不幸的是，我不擅长 JS。

ma​​in.js

import { 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

我认为您需要像这样在循环中单独注册每个组件：

subComponents.js：

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

export { subComponents }

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

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