Можно ли импортировать компонент как опору из другого компонента?
Например:
Q-диалог
<template>
<q-dialog>
<q-layout>
<q-page-container>
<myCustomComponent />
</q-page-container>
</q-layout>
</q-dialog>
</template>
<script>
//Edited:This works, but I want to register dynamically from props
//import myCustomComponent from "components/MyCustomComponent.vue";
import myCustomComponent from this.myComponent;
export default {
props: ["myComponent"],
components: { myCustomComponent }
}
Другой компонент:
this.$q.dialog({
component: CustomComponent, //dialog
myComponent: 'components/MyCustomComponent.vue'
})
Отредактировано, чтобы лучше прояснить, чего я пытаюсь добиться в этом случае:
Мой диалог – это абстрактный компонент, в котором может отображаться неограниченное количество различных myCustomComponent.
Для этого мне нужно, чтобы регистрация каждого компонента (импорт) не выполнялась в q-диалоге.
Решение, которое следует рассмотреть, состоит в том, чтобы зарегистрировать каждый компонент в файле, из которого q-диалог загружается для рендеринга (отличается от q-диалога, в моем случае файл другой компонент), а затем передать этот путь из импортированного файла в q-диалог, возможно, в качестве реквизита.
Это возможно?
Отредактировано с решением:
Родительский компонент
<script>
import registeredComponent from "components/MyCustomComponent.vue";
export default {
data() {
return {
myComponent: registeredComponent
}
}
methods: {
btnClickShowDialog(){
this.$q.dialog({
component: dialogComponent,
//pass registered component as prop to dialog
myCustomComponent: this.myComponent
})
}
}
</script>
Q-диалог
<template>
<q-dialog>
<q-layout>
<q-page-container>
<component :is="myCustomComponent" />
</q-page-container>
</q-layout>
</q-dialog>
</template>
<script>
export default {
props: ["myCustomComponent"]
}
</script>
<component :is="myCustomComponent">
- person LLai   schedule 23.06.2020