Как можно подключить динамические компоненты?

Хочу сделать динамическое подключение компонентов в зависимости от полученных props. Пробовал через этотгайд, но webPack не получает переданное значение. Читал документацию по vue, но динамика там обусловлена уже подключёнными дочерними компонентами к родительскому. Т.е. это псевдо-динамика. Возможно кто то сталкивался с подобной задачей. Сборка WebPack3 и Vue2.
  • Вопрос задан
  • 189 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Динамический импорт компонента, в зависимости от приходящих props

1. Файловая стуктура:
AppTest.vue
components/
  Test-1.vue
  Test-2.vue


2. Использование:
<div>
  <app-test component-name="Test-1" />
</div>


3. AppTest.vue
<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>

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

  created() {
    this.$options.components[this.componentName] = () => import(`./components/${this.componentName}.vue`);
  }
};
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы