如何从另一个组件导入一个组件作为道具?
How to import a component as prop from another component?
可以从另一个组件导入一个组件作为 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-dialog 中而不是注册每个组件(导入)。
要考虑的解决方案是在加载 q-dialog 以进行渲染的文件中注册每个组件(不同于 q-dialog,在我的例子中 另一个组件 文件),然后将该路径从导入的文件传递到 q-dialog,可能作为道具。
这可能吗?
编辑解决方案:
父组件
<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>
在您的 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" />
可以从另一个组件导入一个组件作为 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-dialog 中而不是注册每个组件(导入)。
要考虑的解决方案是在加载 q-dialog 以进行渲染的文件中注册每个组件(不同于 q-dialog,在我的例子中 另一个组件 文件),然后将该路径从导入的文件传递到 q-dialog,可能作为道具。
这可能吗?
编辑解决方案:
父组件
<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>
在您的 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" />