Vue 动态组件和动态道具

Question

我有一个模态组件，如下所示

<modal>
    <component
        :is="modalComponent"
    />
</modal>

而且我需要将不同的道具传递给动态组件。

组件 A 需要标题和名称数组 组件 B 需要标题、事件数组和日期作为字符串。

将不同的道具传递给动态组件的最佳方法是什么？ 我真的不想将所有道具传递给动态组件。

<modal>
    <component
        :is="modalComponent"
        :title='title'
        :names='names'
        :events='events'
        :eventDate='eventDate'
    />
</modal>

Answer 1

使用计算属性生成道具：

<component :is="modalComponent" v-bind="props"/>

computed: {
  props() {
    if (this.modalComponent === 'ComponentA') {
      return {
        title: this.title,
        names: this.names,
      }
    } else if (this.modalComponent === 'ComponentB') {
      return {
        title: this.title,
        events: this.events,
        eventDate: this.eventDate,
      }
    }
  }
}