具有道具的基于动态类的组件

问题描述

我有一些具有属性的基于类的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的属性。当然，您可以更改它，也可以仅将整个通知对象作为道具传递。