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,
      }
    }
  }
}