如何解决具有道具的基于动态类的组件
我有一些具有属性的基于类的Vue.js组件,我想动态呈现。组件很简单,例如以下内容。
<template>
<b-alert :show="true">
{{$t(messageId)}}
</b-alert>
</template>
<script lang="ts">
import {Vue,Component,Prop} from "vue-property-decorator";
import i18n from "../../i18n";
@Component({
i18n
})
export default class UserErrorNotification extends Vue {
@Prop() messageId!: string
}
</script>
这些组件在不同的组件中动态呈现。
<template>
<div id="notification-area">
<div v-for="(notificationComponent,index) in notifications" :key="index">
<component :is="notificationComponent"/>
</div>
</div>
</template>
<script lang="ts">
import {Component,Inject,Vue} from "vue-property-decorator";
import {BAlert} from "bootstrap-vue";
import {Notification} from "@/Notification";
import InfoNotification from "@/components/notifications/InfoNotification.vue";
@Component({
components: {
InfoNotification,}
})
export default class NotificationArea extends Vue {
@Inject('eventBus') private eventBus!: Vue;
notifications = [] as Array<Vue>;
notificationToComponent(notification: Notification): Vue {
if (notification.type == "success") {
let notificationComponent;
/* Somehow instantiate and fill in Props */
return notificationComponent
} else {
throw new Error("Unknown Notification Type: " + notification.type)
}
}
created() {
this.eventBus.$on('notification',(notification: Notification) => {
this.notifications.push(this.notificationToComponent(notification));
})
}
我知道$options
给了我一个可以呈现的选项对象,但是消息(InfoNotification组件的属性)始终为空。
我已经尝试调用Component的构造函数并分配给属性,并将propsData参数传递给构造函数。两者均未填充组件的道具。有什么办法吗?
解决方法
实际上,您永远不会在代码中传递道具。另外,我建议不要在脚本中构建组件数组。属性的传递也应该在模板中完成。
如果要将多个道具作为对象传递,请使用v-bind属性,例如:
<component v-bind="propsObject" />
对象应如下所示:
{
messageId: "hello world"
}
不过,就像我说过的那样,在脚本中构建组件并不是一种好习惯。
尝试一下:
<template>
<div id="notification-area">
<div v-for="(notification,index) in notifications" :key="index">
<InfoNotification :messageId="notification.messageId"/>
</div>
</div>
</template>
<script lang="ts">
import {Component,Inject,Vue} from "vue-property-decorator";
import {BAlert} from "bootstrap-vue";
import {Notification} from "@/Notification";
import InfoNotification from "@/components/notifications/InfoNotification.vue";
@Component({
components: {
InfoNotification,}
})
export default class NotificationArea extends Vue {
@Inject('eventBus') private eventBus!: Vue;
notifications = [] as Array<Notification>;
created() {
this.eventBus.$on('notification',(notification: Notification) => {
this.notifications.push(notification);
})
}
}
</script>
我只是假设您的“通知”对象具有一个名为messageId的属性。当然,您可以更改它,也可以仅将整个通知对象作为道具传递。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。