带有道具的基于动态类的组件答案

【问题标题】：Dynamic Class Based Component With Props带有道具的基于动态类的组件
【发布时间】：2020-08-11 14:16:16
【问题描述】：

我有一些基于类的带有属性的 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 参数传递给构造函数。都没有填充组件的道具。有没有办法做到这一点？

【问题讨论】：

标签： typescript vue.js vuejs2

【解决方案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 的属性。当然，您可以更改它或将整个通知对象作为道具传递。

【讨论】：