如何正确动态导入多个组件并在 Nuxt 中使用它们？答案

【问题标题】：How do I properly import multiple components dynamically and use them in Nuxt?如何正确动态导入多个组件并在 Nuxt 中使用它们？
【发布时间】：2021-11-10 22:55:03
【问题描述】：

我需要在 Nuxt + CMS 包中实现动态页面。

我将 URL 发送到服务器，如果存在这样的页面，我会收到数据。
数据包含我需要使用的组件列表，组件的数量可以不同。
我需要动态导入这些组件并在页面上使用。

我不完全了解如何正确导入这些组件并使用它们。

我知道我可以使用组件的全局注册，但是在这种情况下我对动态导入感兴趣。

这是一个演示，描述了我的应用程序的大致逻辑。

https://codesandbox.io/s/dank-water-zvwmu?file=%2Fpages%2F_.vue

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

这是一个可能对你有用的 github 问题：https://github.com/nuxt/components/issues/227#issuecomment-902013353

我以前用过类似的东西

<nuxt-dynamic :name="icon"></nuxt-dynamic>

借助dynamic，根据icon 属性加载动态SVG。

从现在开始，你应该可以做到的

<component :is="componentId" />

但它看起来在性能方面很昂贵。

这当然是基于Nuxt components 并自动导入它们。
另外，如果你想从任何你想要的地方导入这些，你可以关注我的answer here。

【讨论】：

感谢您的帮助，如果项目使用全局组件（又名组件“库”），您的解决方案非常棒，不幸的是我只需要导入某些组件。下面我将给出我使用的解决方案。
我最终采纳了您的建议并使用了@nuxt/components。我将保留动态导入的方法，因为它可能更适合其他人。谢谢！ :)

【解决方案2】：

我使用了这个解决方案。我在 asyncData 钩子中获取所有必要的数据，然后在 created() 钩子中导入组件 https://codesandbox.io/s/codesandbox-nuxt-uidc7?file=/pages/index.vue

  asyncData({ route, redirect }) {
    const dataFromServer = [
      {
        path: "/about",
        componentName: 'myComponent'
      },
    ];

    const componentData = dataFromServer.find(
      (data) => data.path === route.path
    );

    return { componentData };
  },

  data() {
    return {
      selectedRouteData: null,
      componentData: {},
      importedComponents: []
    };
  },

  created() {
    this.importComponent();
  },

  methods: {
    async importComponent() {
      const comp = await import(`~/folder/${this.componentData.componentName}.vue`);

      this.importedComponents.push(comp.default);
    }

【讨论】：