Vue.js 在 Vue 中删除自定义组件代码重复的方法

发布于12月23日

我的自定义组件代码:

<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所需的预设数据？我不知道如何使用文档，不知道是否有人有什么建议.

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

Vue.js 在 Vue 中删除自定义组件代码重复的方法

推荐答案

Vue.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

如何使用composition api v-model Select 框获取其他JSON 值？

视图中的 vue 样式不适用于 html

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

禁用 vue-cli webpack 编码图像 base64

拖入 vue2-google-map 后如何获取标记位置？

使用 Nuxt 动态获取文件夹中的图像路径

在重复表行中

从数据库中删除后，Vue.js $remove 不删除元素

在keyup Vuejs 2上获取输入值

如何使用 v-on：change 将输入文本传递给我的 vue 方法？

如何在 vue.js 中删除类

如何获取 Vue 路由历史记录？

React.js 是否有类似 Vue.js

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要？

未在实例上定义，但在渲染期间引用

如何从 Vuex 操作访问 Vuex 状态属性？

如何从扩展面板(Vuetify)中删除阴影？

使用 vuex-persistedstate 仅使一个模块持久化

vuejs 中缺少 webpack 配置