Vue / Nuxt: Как сделать компонент действительно динамичным?

Question

Чтобы использовать динамически определенный одностраничный компонент, мы используем тег component, таким образом:

<component v-bind:is="componentName" :prop="someProperty"/>

...

import DynamicComponent from '@/components/DynamicComponent.vue';

...
components: {
    DynamicComponent
},

props: {
    componentName: String,
    someProperty: null,
}

Проблема в том, что на самом деле это не очень динамично, поскольку каждыйкомпонент, который мы когда-либо могли бы захотеть использовать, должен быть не только импортирован статически, но и зарегистрирован в components.

Мы попытались сделать это, чтобы хотя бы избежать необходимости импортировать все:

created() {
    import(`@/components/${this.componentName}.vue`);
},

но, конечно, это не помогает, так как кажется, что DynamicComponent должен быть определен до достижения created().

Как мы можем использовать действительно динамический компонент, то есть импортированный и зарегистрированныйво время выполнения, дается только его имя?

Answer 1

Из документации : Акцент на мой

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component> 

В приведенном выше примере currentTabComponent может содержать либо:

• имя зарегистрированного компонента,
• или объект параметров компонента

Если currentTabComponent является свойством данных вашегоКомпонент Вы можете просто импортировать определение компонента и напрямую передать его тегу компонента, не определяя его в текущем шаблоне.

Вот пример , где содержимое компонента изменится, если вы нажмете на логотип Vue.

Вот так:

<component :is="dynamic" />

...

setComponentName() {
    this.dynamic = () => import(`@/components/${this.componentName}.vue`);
},

Answer 2

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

Vue.component('componentName', function (resolve, reject) {
  requestTemplate().then(function (response) {
    // Pass the component definition to the resolve callback
    resolve({
      template: response
    })
  });
})