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 for dynamic Nuxt.js components

Answer 2

从documentation：强调我的

<component v-bind:is="currentTabComponent"></component> 
在上面的示例中，currentTabComponent可以包含以下任一内容：


注册组件的名称，

或组件的选项对象

如果currentTabComponent是组件的数据属性，则只需导入组件定义并将其直接传递到component标签，而不必在当前模板上进行定义。

Here is an example，如果您单击Vue徽标，组件内容将更改。

赞：

<component :is="dynamic" />

...

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

Answer 3

您正在谈论async components。您只需要使用以下语法即可返回带有promise的组件定义。

SignInManager<>

Answer 4

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

Vue / Nuxt：如何使组件真正具有动态性？

4 个答案: