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>

通过注册类似的组件，您可以确保仅导入使用过的组件。

动态导入组件

1 个答案: