javascript - Vue js 动态导入组件

Question

我有以下父组件，它必须呈现动态子组件列表:

<template>
  <div>
    <div v-for="(componentName, index) in supportedComponents" :key="index">
      <component v-bind:is="componentName"></component>
    </div>
   </div>
 </template>

<script>
const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");
export default {
  name: "parentComponent",
  components: {
    Component1,
    Component2
  },
  props: {
    supportedComponents: {
      type: Array,
      required: true
    }
  }
};
</script>

supportedComponents属性是我想在父组件中呈现的组件名称列表。

为了使用父组件中的子组件，我必须导入它们并注册它们。

但唯一的方法是硬编码组件的导入路径:

const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");

然后像这样注册它们:

components: {
  Component1,
  Component2
}

我想保留我的parentComponent尽可能通用。这意味着我必须找到一种方法来避免在导入语句和注册时硬编码组件路径。我想注入(inject) parentComponent它应该导入和渲染哪些子组件。

这在Vue中可能吗？如果是，那么如何？

Answer 1

您可以在 中加载组件已创建 生命周期并根据您的数组属性注册它们:

<template>
    <div>
        <div v-for="(componentName, index) in supportedComponents" :key="index">
            <component :is="componentName"></component>
        </div>
    </div>
</template>

<script>
    export default {
        name: "parentComponent",
        components: {},
        props: {
            supportedComponents: {
                type: Array,
                required: true
            }
        },
        created ()  {
            for(let c=0; c<this.supportedComponents.length; c++) {
                let componentName = this.supportedComponents[c];
                this.$options.components[componentName] = () => import('./' + componentName + '.vue');
            }
        }
    };
</script>

效果很好