基于动态类和属性的组件

Question

我有几个带有属性的基于类的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提供了一个可以呈现的Options对象，但是message ( InfoNotification组件的属性)总是空的。

我已经尝试调用组件的构造函数，并将其赋值给属性，并将propsData参数传递给构造函数。两个都没有填满组件的支柱。有没有办法做到这一点？

Answer 1

实际上，你从来没有在你的代码中传递道具。此外，我建议不要在脚本中构建组件数组。属性的传递也应该在你的模板中完成。

如果希望将多个道具作为一个对象传递，请使用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的属性。当然，您可以对此进行更改，或者只是将整个通知对象作为一个属性进行传递。