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 как можно более универсальным.Это означает, что я должен найти способ избежать жестко закодированных путей компонентов в операторах импорта и регистрации.Я хочу добавить в parentComponent какие дочерние компоненты он должен импортировать и визуализировать.

Возможно ли это в Vue?Если да, то как?

Answer 1

Разрешение динамического импорта из веб-пакета () во время выполнения

Вы можете динамически установить путь к функции import() для загрузки различных компонентов в зависимости от состояния компонента.

<template>
  <component :is="myComponent" />
</template>

<script>
export default {
  props: {
    component: String,
  },

  data() {
    return {
      myComponent: '',
    };
  },

  computed: {
    loader() {
      return () => import(`../components/${this.component}`);
    },
  },

  created() {
    this.loader().then(res => {
      // components can be defined as a function that returns a promise;
      this.myComponent = () => this.loader();
    },
  },
}
</script>

Примечание: JavaScript компилируется вашим браузером непосредственно перед запуском.Это никак не связано с разрешением импорта веб-пакетов.

Answer 2

Вы можете загрузить компоненты внутри созданного жизненного цикла и зарегистрировать их в соответствии со свойством массива:

<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>

Работает довольно хорошо

Answer 3

Вы можете зарегистрировать компоненты в Vue, а затем просто использовать их глобально без импорта или регистрации.

yourMain.js:

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


Vue.component('Component1', Component1);
Vue.component('Component2', Component1);

YourComponent.vue

<template>
 <div> 
    <Component1 />
    <Component2 />
 </div>
</template>

https://vuejs.org/v2/guide/components-registration.html