如何消除Vue自定义组件的代码重复？以EventCard组件为例

自定义组件代码 #

Template 部分 #

<template>
  <div class="event">
    <div class="title text">
      {{ title }}
    </div>
    <div class="date text">
      {{ date }}
    </div>
    <div class="time text">
      {{ time }}
    </div>
    <div class="address text">
      {{ address }}
    </div>
    <div class="learn-more text">
      Learn more!
    </div>
  </div>
</template>

Script 部分 #

export default {
  name: 'EventCard',
  props: {
    title: { 
      type: String, 
      required: true, 
      default: ''
    }, 
    date: { 
      type: String, 
      required: false, 
      default: ''
    },
    time: { 
      type: String, 
      required: true, 
      default: ''
    },
    address: { 
      type: String, 
      required: true, 
      default: ''
    },
    type: {
      type: String,
      required: true,
      default: ''
    }
  }
}

原页面重复调用代码（EventDiscoveryPage.vue） #

<div class="events">
  <EventCard class="food-event" :title="'food event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="middle-row-event music-event" :title="'music event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="music-event" :title="'music event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="comedy-event" :title="'comedy event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="middle-row-event music-event" :title="'music event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="food-event" :title="'food event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="music-event" :title="'music event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="middle-row-event comedy-event" :title="'comedy event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
  <EventCard class="comedy-event" :title="'comedy event'" :date="'date-test'" :time="'time-test'" :address="'address-test'" :type="'music'" />
</div>

优化方案：用v-for批量渲染 #

v-for确实需要基于预设的数据数组来工作，把每个组件的属性整理成数组后，就能通过循环大幅减少重复代码，还能提升后续维护效率。

步骤1：在页面组件中定义事件数据数组 #

在EventDiscoveryPage.vue的script里，把所有EventCard的参数封装成一个数组：

export default {
  // 其他页面逻辑...
  data() {
    return {
      eventsList: [
        {
          classes: 'food-event',
          title: 'food event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'middle-row-event music-event',
          title: 'music event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'music-event',
          title: 'music event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'comedy-event',
          title: 'comedy event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'middle-row-event music-event',
          title: 'music event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'food-event',
          title: 'food event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'music-event',
          title: 'music event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'middle-row-event comedy-event',
          title: 'comedy event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        },
        {
          classes: 'comedy-event',
          title: 'comedy event',
          date: 'date-test',
          time: 'time-test',
          address: 'address-test',
          type: 'music'
        }
      ]
    }
  }
}

步骤2：用v-for循环渲染组件 #

把原来重复的EventCard调用替换成循环，注意要给每个循环项加唯一的:key：

<div class="events">
  <EventCard 
    v-for="(event, index) in eventsList" 
    :key="index"
    :class="event.classes"
    :title="event.title"
    :date="event.date"
    :time="event.time"
    :address="event.address"
    :type="event.type"
  />
</div>

额外优化提示 #

• 尽量避免用index作为:key，如果后续有事件新增、删除或排序操作，可能导致组件渲染异常。如果每个事件有唯一标识（比如后端返回的ID），用这个唯一值作为key更稳妥。
• 可以把重复的默认值（比如date-test、time-test）抽成常量，进一步简化数据数组。
• 后续如果事件数据来自后端接口，只需把eventsList替换为接口返回的数据即可，渲染逻辑不用改，扩展性更强。

内容的提问来源于stack exchange，提问作者Elias Lind