How can I connect dynamic components?

Question

JavaScript

I want to make a dynamic connection of components depending on the received props. I tried through this guide, but webPack does not receive the passed value. I read the vue documentation, but the dynamics there are due to the child components already connected to the parent. Those. it's a pseudo-dynamic. Perhaps someone faced a similar problem. Building WebPack3 and Vue2.

Answer 1

Dynamic import of a component, depending on the incoming props
1. File structure:

AppTest.vue
components/
  Test-1.vue
  Test-2.vue

2. Usage:

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