Question

是否可以从另一个组件中将一个组件作为prop导入？

例如：

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>

Answer 1

在q对话框组件中，您可以使用component标签来动态呈现传入的组件prop。请参见此stackblitz。

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

在父组件中，您需要导入所需的组件，将其分配给data属性，并将其传入

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

data () {
    return {
        passedInComponent: SomeComponent
    }

}

// parent component html
<q-dialog :my-component="passedInComponent" />

如何从另一个组件导入一个组件作为prop？

1 个答案: