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

Vue动态组件和动态道具

1 个答案: