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

你说的是 async components。您只需要使用以下语法来 return 带有承诺的组件定义。

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

Answer 2

来自documentation：强调我的

<component v-bind:is="currentTabComponent"></component> 
In the example above, currentTabComponent can contain either:

the name of a registered component,

or a component’s options object

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

Here is an example这里的组件内容如果点击vue的logo会发生变化。

像这样：

<component :is="dynamic" />

...

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

Answer 3

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

Answer 4

仅适用于 Nuxt 的解决方案

截至目前，可以在 Nuxt 中自动导入组件 (nuxt/components)。如果你这样做，你就有了一堆准备好在你的 vue 模板中使用它们时注册的组件，例如：

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

如果您想将真正的动态组件与 nuxt/components 相结合，您可以利用 Nuxt 自动准备组件的方式。我创建了一个包，它为自动导入的组件启用动态组件（你可以在这里查看：@blokwise/dynamic）。

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

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

其中 componentName 可能是 'MyComponent'。该名称可以静态存储在变量中，甚至可以通过 API 调用您的后端/CMS 动态创建。

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

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

Vue/Nuxt: How to make a component be truly dynamic?

dynamic

vue.js

nuxt.js

vue-dynamic-components