Как динамически импортировать модуль vue.js?

Question

[Yasuro]

Название модуля мне надо получить из props.
Я сделал так и это работает:

<template>
  <div>
    <component :is="componentLoader" :parent="response.parent"></component>
  </div>
</template>


<script>
export default {
  props: ["response"],

  computed: {
    componentLoader() {
      this.response; //Если я вызову response тут...
      return () => {
        this.parent = this.response.tempParam; // то здесь я смогу получить доступ к tempParam, в противном случае получается undefined
        return import("./response/" + this.parent);
      };
    }
  }
};
</script>>

<style scoped>
</style>

Но проблема в том, что this.parent я хардкожу, а хочется его получать из response. Если я делаю так: this.response.parent , то я получаю undefined.
Если вы предложите другую реализацию, я буду рад.
Использую webPack.

p.s https://codeshare.io/5zeNkD

Answer 1

[HeTpe3B]

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

https://vuejs.org/v2/guide/components-dynamic-asyn...

Comments

[Yasuro]

Мне имя компоненты надо получать из props. В этом и был вопрос)

[HeTpe3B]

Один из вариантов, подключить все компоненты глобально и в компутед возвращать их имена в зависимости от того, что пришло в props.

computed: {
  componentName() {
    return `${this.anyDataString}-${this.propName}`
  }

Да в принципе, можно и напрямую имя компонента из пропс брать
<component :is="propName"></component>

Но если не хочется глобально все компоненты загружать, читайте ссылку выше:

Vue.component(
  'async-webpack-example',
  // The `import` function returns a Promise.
  () => import('./my-async-component')
)

[HeTpe3B]

Т.е. у вас в компьютед должно возвращаться имя компонента, а не объект компонента (как в вашем примере). Просто имя (string)

[Yasuro]

HeTpe3B прав, это работает.
Я нашел Еще один способ добиться нужного результата. Поправил код в вопросе, сейчас он рабочий.
Обратите внимание. Загружать компоненты computed не есть хорошо, лучше использовать глобальную регистрацию