Vue/Nuxt：如何让组件真正动态？

Question

为了使用动态定义的单页面组件，我们使用

component

标签，因此：

<component v-bind:is="componentName" :prop="someProperty"/>

...

import DynamicComponent from '@/components/DynamicComponent.vue';

...
components: {
    DynamicComponent
},

props: {
    componentName: String,
    someProperty: null,
}

问题是，这根本不是非常动态，因为我们可能想要在这里使用的每个组件不仅需要静态导入，而且还需要在

components

中注册。

我们尝试这样做，至少是为了避免导入所有内容：

created() {
    import(`@/components/${this.componentName}.vue`);
},

但是这当然失败了，因为似乎必须在到达

DynamicComponent

之前定义

created()

。

我们如何使用真正动态的组件，即在运行时导入并注册，仅给出其名称？

Answer 1

仅适用于 Nuxt 的解决方案

到目前为止，可以在 Nuxt 中自动导入组件（

nuxt/components

）。如果这样做，那么每当您在 vue 模板中使用它们时，您就有了一堆可以注册的组件，例如：

<MyComponent some-property="some-value" />

如果您想将真正的动态组件与

nuxt/components

相结合，您可以利用Nuxt自动准备组件的方式。我创建了一个包，它支持自动导入组件的动态组件（您可以在这里查看：

@blokwise/dynamic

）。

长话短说：使用该包，您可以像这样动态导入组件：

<NuxtDynamic :name="componentName" some-property="some-value" />

其中

componentName

可能是

'MyComponent'

。该名称可以静态存储在变量中，甚至可以通过对后端/CMS 的某些 API 调用动态创建。

如果您对底层魔法的工作原理感兴趣，可以查看这篇文章：Crank up auto import fordynamic Nuxt.js Components

Answer 2

来自文档：强调我的

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component> 

在上面的示例中，

currentTabComponent

可以包含：

• 已注册组件的名称，
• 或组件的选项对象

如果

currentTabComponent

是组件的数据属性，您可以简单地导入组件定义并将其直接传递给组件标签，而无需在当前模板上定义它。

这是一个示例，如果单击 Vue 徽标，组件内容将会发生变化。

像这样：

<component :is="dynamic" />

...

setComponentName() {
    this.dynamic = () => import(`@/components/${this.componentName}.vue`);
},

Answer 3

根据官方文档：从v2.13开始，Nuxt可以在模板中使用时自动导入您的组件，要激活此功能，请在配置中设置组件：true

Answer 4

您正在谈论异步组件。您只需使用以下语法即可返回带有 Promise 的组件定义。

Vue.component('componentName', function (resolve, reject) {
  requestTemplate().then(function (response) {
    // Pass the component definition to the resolve callback
    resolve({
      template: response
    })
  });
})

Answer 5

仅 Nuxt 的解决方案将通过

@nuxt/components

，因此在您的

nuxt.config.js

中只需添加您想要动态的任何“组件”路径并将其设为全局

// nuxt.config.js
export default {
  components: [{ path: "~/components", global: true }]
}

然后就可以动态加载了

<template>
  <div>
    <h2>Nuxt Dynamic Components</h2>
    <div v-for="name in ['test1', 'test2']" :key="name">
      <component :is="name"></component>
    </div>
  </div>
</template>

在 github 上查看此答案以了解同一问题以获得更多理解

https://github.com/nuxt/components/issues/13#issuecomment-730660918