Используйте <component>, который был импортирован в родительский элемент
Я создаю компонент, который управляет другими компонентами.
Он динамически отображает компоненты в определенных местах в зависимости от 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 работал, я должен иметь компонент, определенный в моем компоненте оркестратора/менеджера. И я хотел бы сохранить его отдельно для повторного использования, нет смысла импортировать туда компоненты. Одним из решений было бы глобальная регистрация компонентов. Я хотел бы избежать этого, если это возможно. Есть ли способ? Я открыт для любой магии отражения, о которой вы можете подумать, n_n'
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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,
};
},
}
У меня сложилось впечатление, что OP не хотел импортировать компонент из компонента оркестратора, которого это решение избегает, требуя передачи компонента через реквизит. Orchestrator не привязан к импорту каких-либо конкретных компонентов.
Не могу поверить. Я пробовал это, но не сделал этого, но компонент в data. -___- Чувствую себя глупо, спасибо @DecadeMoon, а также спасибо @Phil!
Вы должны иметь возможность использовать асинхронные компоненты, загружаемый динамически.
Например...
<component :is = "p2Replacement"></component>
data () {
return {
p2Replacement: null
}
},
methods: {
setP2Replacement(component) {
this.p2Replacement = () => import(`path/to/${component}.vue`)
}
}
И назовите это как setP2Replacement('C1') или setP2Replacement('C3').
Фиксированные части в выражении import необходимы, чтобы Webpack мог включать соответствующие файлы, используя шаблон глобуса. См. https://webpack.js.org/guides/dependency-management/#require-context
Я думаю, что
import MyComponent from './my-component.vue'это именно то, чего пытается избежать ОП.