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

Question

[Никита Ронзин]

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

Comments

[Михаил]

ну так обычный асинхронный импорт, https://ru.vuejs.org/v2/guide/components-dynamic-a...

в чем проблема?

[Никита Ронзин]

Михаил, попробую, спасибо

[Никита Ронзин]

Михаил, В представленном вами ответе предлагается просто подгружать уже заранее определённые компоненты по требованию, как я написал в своём вопросе это псевдо-динамика. Мне необходимо чтобы подгружались компоненты которые я укажу в props. Т.е. у меня есть родительский компонент, в который передаётся теоретическое имя компонента, это имя подставляется в inport и подгружается сформированный компонент. Конструкция вида

components: {
  SomeTemplate: () => import(`./someway/${this.nameComponent}`)
},
props: {
  nameComponent: {
    type: String,
    default: 'name'
}
}

И отвечая на ваш вопрос в чём проблема: в том что переменная из props приходит как undefined.

[Михаил]

Никита Ронзин, нуууууууу, я поколдовал и вроде что-то получилось

https://codesandbox.io/s/vue-template-8d41y

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>

<script>
export default {
  props: {
    test: Number
  },

  data: () => ({
    componentName: null
  }),

  created() {
    const components = this.$options.components;
    const name = `Test-${this.test}.vue`;
    this.componentName = name;

    components[name] = () => import(`./components/${name}`);
  }
};
</script>

[Никита Ронзин]

Михаил, Михаил, снимаю перед вашими знаниями шляпу) то что нужно )) если вам не сложно будет то копирните это в ответы, нужно отменить это как решение.

[Михаил]

Никита Ронзин, проверьте чтоб работало без багов, и насколько я знаю babel
import(`./components/${name}`)
включит все компоненты в /components/ в конечную сборку, либо раскинет их по отдельным файлам

в общем протестируйте

[Никита Ронзин]

Михаил, проверил в сборке с babel, вроде проблем нет

Answer 1

[Михаил]

Динамический импорт компонента, в зависимости от приходящих 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>

Comments

[Никита Ронзин]

сокращённый вариант не функционирует, я остановился на более длинном варианте.