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

来自文档：强调我的

\n

\n

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

\n

在上面的例子中，currentTabComponent可以包含：

\n

\n
• 已注册组件的名称，
\n
• 或组件\xe2\x80\x99s 选项对象
\n

\n

\n

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

\n

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

\n

像这样：

\n

<component :is="dynamic" />\n

\n

...

\n

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

\n