动态导入组件

Question

我有一个名为 Home.vue 的组件，我尝试动态导入组件。

我的vue组件是

<template>
    <div>
        <!-- NEW -->
        <div v-for="widget in widgets">
            <component v-bind:is="componentFile"></component>
        </div>
        <!-- NEW -->

        <!-- OLD - to be deleted -->
        <widget-name1></widget-name1>
        <widget-name2></widget-name2>
        <!-- OLD -->

    </div>


</template>

<script>

    // import Name1 from '../components/widgets/Name1.vue';
    // import Name2 from '../components/widgets/Name2.vue';

    export default {
        data() {
            return {
                widget: 'Name1',
                widgets: [
                    'Name1',
                    'Name2',
                ],
            }
        },

        components: {
            // WidgetName1: Name1,
            // WidgetName2: Name2,
        },

        computed: {
            componentFile() {
                return (widget) => import(`./widgets/${this.widget}.vue`);
            }
        }

    }
</script>

我想拥有多个小部件并使用名为小部件的变量对它们进行排序。 此代码现在呈现两次名为 Name1 的小部件。 我如何将变量传递给 componentFile，例如（小部件）以动态渲染组件，因为 this.widget 参考 widget: 'Name1'.

如果我这样做：

<div v-for="widget in widgets">
     <component v-bind:is="componentFile(widget)"></component>
</div>

我遇到了一个错误 Failed to mount component: template or render function not defined.

Answer 1

好吧，你需要以任何方式在components注册组件。

要做的事情是：

<template>
  <div>
    <div v-for="widget in widgets">
      <component v-bind:is="widget"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      widgets: [
        'Name1',
        'Name2',
      ],
    }
  },
  components: {
    Name1: () => import(`./widgets/Name1.vue`),
    Name2: () => import(`./widgets/Name2.vue`),
  },
}
</script>

通过注册这样的组件，您可以确保只导入使用过的组件。