javascript - 如何在 Nuxt 中渲染异步和动态组件？

Question

我正在尝试在我的应用程序中使用异步和动态组件的组合，到目前为止它看起来像这样：

<template>
  <component
    v-for="(component, index) in components"
    :key="index"
    :is="component.name"
    :data="component"
  />
</template>

<script>
export default {
  components: {
    component1: () => import(`@/components/component1.vue`),
    component2: () => import(`@/components/component2.vue`)
  }
}
</script>

这可行，但我试图避免必须单独手动导入所有组件。

我尝试用:is一​​种方法替换：

:is="getComponent(组件)"

<script>
  //...
  methods: {
    getComponent(component) {
      const componentName = component.name;

      return () => import(`@/components/${componentName}.vue`);
    }
  }
</script>

最初可以工作，但随后浏览器会使用大量内存卡住，就好像它卡在无限循环中一样。

有什么建议吗？我正在使用 NUXT，但我认为这也适用于普通的 VueJS 应用程序。

标签： javascriptvue.jsvuejs2nuxt.js