如何去除Vue中的自定义组件代码重复？

iaqfqrcu 于 2022-12-27 发布在 Vue.js

关注(0)|答案(2)|浏览(188)

我的自定义组件代码：

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

<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所需的预设数据？我无法使用文档来找出答案，不知道是否有人有任何建议。

vue.js

来源：https://stackoverflow.com/questions/74900648/way-to-remove-custom-component-code-repetition-in-vue

2条答案

按热度按时间

wn9m85ua1#

你可以使用v-来重构你的代码，以迭代一个对象数组，如下所示：

<template>
  <div class="events">
    <EventCard v-for="event in events" :key="event.title" :class="event.class" :title="event.title" :date="event.date" :time="event.time" :address="event.address" :type="event.type" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      events: [
        { class: 'food-event', title: 'food event', date: 'date-test', time: 'time-test', address: 'address-test', type: 'music' },
        { class: '...', title: '...', date: '...', time: '...', address: '...', type: '...' },
        ...
      ]
    }
  }
}
</script>

赞(0）回复(0）举报 2022-12-27

puruo6ea2#

您可以像这样将所有这些对象缩减为EventDiscoveryPage.vue中的一个对象，然后将这些对象添加到一个数组中并循环遍历该数组：

<script setup>
    // Factory Function to build objects (You can easily add types as well)
    function createCard( class, title, date, time, address, type ) {
        return {
            class,
            title,
            date,
            time,
            address,
            type
        }
     }

    const food = createCard('food-event', 'food event', 'date-test', 'time-test', 'address-test', 'music')
    const otherEvent = createCard( class, title, date, time, address, type )

    // Add each event to the cards array
    let cards = [food, otherEvent]
</script>

<div class="events">
    <EventCard v-for="card in cards" :class="card.class" :data="card" />
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

如何去除Vue中的自定义组件代码重复？

2条答案

相关问题

热门标签

最新问答