代码之家 › 专栏 › 技术社区 › jose

如何从另一个组件导入一个组件作为道具?

quasar vue.js

0

jose · 技术社区 · 5 年前

是否可以从另一个组件导入一个组件作为道具?

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-dialog进行渲染(与q-dialog不同,在我的例子中是文件),然后将该路径从导入的文件传递到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>

0 回复 | 直到 5 年前

1

LLai 5 年前

在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" />