typescript - 带有道具的基于动态类的组件
问题描述
我有一些基于类的带有属性的 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 的属性。当然,您可以更改它或将整个通知对象作为道具传递。
推荐阅读
- javascript - 在 SuiteScript 2.0 中使用变量作为搜索参数
- docker - 在 docker 容器中设置 ldconfig LD_LIBRARY_PATH
- c# - Microsoft.Office.Interop.Outlook._Items.SetColumns(字符串列)问题
- bash - 通过比较时间戳加速 maven-deploy-plugin:deploy-file
- powershell - 在线交换我可以得到所有邮箱的列表吗
- xamarin - 为特定 Xamarin 应用程序强制执行主题
- c# - C#中的Android Xamarin灰色菜单项
- javascript - 数组中未定义的元素,其中包含随机数
- javascript - 为什么我有错误加载资源失败:net::ERR_FILE_NOT_FOUND?
- javascript - window.open 是否阻塞了我的其他 javascript 行?