Как импортировать компонент в качестве реквизита из другого компонента?

Можно ли импортировать компонент как опору из другого компонента?

Например:

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>

person josei    schedule 23.06.2020    source источник
comment
stackoverflow.com/questions/59923758/   -  person Patel Pratik    schedule 23.06.2020
comment
Спасибо за помощь. Я отредактировал свой вопрос, чтобы лучше уточнить, чего я пытаюсь достичь в этом случае.   -  person josei    schedule 23.06.2020
comment
Я думаю, что Sumurais link находится на правильном пути. С помощью динамических компонентов вы можете загрузить свой компонент в DOM, например <component :is="myCustomComponent">   -  person LLai    schedule 23.06.2020
comment
Я пробовал это несколькими способами, но кажется, что мне обязательно нужно зарегистрировать компонент (импортировать компонент для рендеринга как myCustomComponent) в q-диалог, которого я хочу избежать, чтобы q-диалог оставался таким же абстрактным, как возможно   -  person josei    schedule 23.06.2020
comment
Другими словами, код q-диалога всегда будет одним и тем же. когда я отображаю q-диалог из другого файла с помощью this$q.dialog, я передаю все соответствующие данные, а также зарегистрированный/импортированный компонент в q-диалог, возможно, в качестве реквизита   -  person josei    schedule 23.06.2020


Ответы (1)


В вашем компоненте q-dialog вы можете использовать тег component для динамического рендеринга переданного компонента. См. этот stackblitz.

// q-dialog html
<component :is="myComponent" />

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

// parent component js
import SomeComponent from './SomeComponent.vue'

data () {
    return {
        passedInComponent: SomeComponent
    }

}
// parent component html
<q-dialog :my-component="passedInComponent" />
person LLai    schedule 23.06.2020
comment
Спасибо Ллай. Мне кажется, что ваше решение отлично подходит для этого случая. Несмотря на несколько попыток, я не смог найти решение, основанное на рендеринге q-dialog с помощью this.$q.dialog ({}) из родительского метода и передаче дочернего компонента q-dialog в качестве реквизита. Возможным решением была бы глобальная регистрация компонента, но я не хочу следовать этому решению. Спасибо еще раз. - person josei; 23.06.2020
comment
Я отредактировал свой вопрос с решением, которое работает для моего случая. Спасибо за предложения, которые очень помогли. - person josei; 24.06.2020
comment
@josei, я рад, что смог помочь! - person LLai; 24.06.2020