Используйте <component>, который был импортирован в родительский

Question

Я создаю компонент, который управляет другими компонентами.Он динамически отображает компоненты в определенных местах в зависимости от props и inputs, во многом как оркестратор.

Вариант использования

Мой оркестратор имеет следующие заполнители, такие как сетка (p1... p6):

|-p1-|-p2-|-p3-|
|-p4-|-p5-|-p6-|

В данный момент он переводит компонент C1 в p2 и C2 в p6:

|-p1-|-C1-|-p3-|
|-p4-|-p5-|-C2-|

В другоммомент, он заменяет C1 на C3:

|-p1-|-C3-|-p3-|
|-p4-|-p5-|-C2-|

Проблема

Учитывая этот динамизм, я не могу (насколько я знаю) использовать slots.Поэтому я использую теги component с реквизитом :is для динамического рендеринга правильного компонента.Проблема в том, что для того, чтобы :is работал, у меня должен быть компонент, определенный в моем компоненте orchestrator / manager.И я хотел бы держать его отдельно для повторного использования, не имеет смысла импортировать туда компоненты.Одним из решений было бы глобально зарегистрировать компонентов.Я хотел бы избежать этого, если это возможно.Есть ли способ?Я открыт для любого вида магии отражения, вы можете подумать n_n '

Answer 1

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

Например ...

<component :is="p2Replacement"></component>

data () {
  return {
    p2Replacement: null
  }
},
methods: {
  setP2Replacement(component) {
    this.p2Replacement = () => import(`path/to/${component}.vue`)
  }
}

И называть это как setP2Replacement('C1') или setP2Replacement('C3').

Требуются фиксированные части в выражении import, чтобы Webpack мог включать соответствующие файлы с использованием шаблона glob.Смотри https://webpack.js.org/guides/dependency-management/#require-context

Answer 2

Вы можете просто передать компонент через опору, как это:

Orchestrator.vue

<component :is="comp"/>

export default {
  props: ['comp']
}

Test.vue

<orchestrator :comp="MyComponent"/>

import Orchestrator from './orchestrator.vue'
import MyComponent from './my-component.vue'

export default {
  components: {
    Orchestrator,
  },

  data() {
    return {
      MyComponent,
    };
  },
}