Vue JS - 循环组件

Posted 2023-02-23

【中文标题】Vue JS - 循环组件

【英文标题】：Vue JS - Looping through components

【发布时间】：2021-05-21 03:30:56

【问题描述】：

我目前正在重构我的代码以使其看起来更简洁，但我偶然发现了一个看起来并不整洁的部分，并且可能不是执行此类代码的最佳实践。

Statistics.vue - 在这里我使用了 3 次 StatisticsCard 组件，以显示每个组件的每个相关数据

<template>
  <div class="statistics-section">
    <img class="statistics-image" src="@/assets/img/images/[e-mail]" >
    <h3 class="section-title">Statistieken</h3>
    <p class="section-description">De studenten van Het Creiler hebben samen ...</p>
    <div class="statistics-cards">
      <StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
                      :title="'kilometers'"
                      :number="kilometers"
                      :type="'GELOPEN'"/>

      <StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
                      :title="'stukken'"
                      :number="trashCollected"
                      :type="'AFVAL OPGRUIMD'"/>

      <StatisticsCard :imageUrl="require('@/assets/img/images/[e-mail]')"
                      :title="'foto\'s'"
                      :number="photosTaken"
                      :type="'GEDEELD'"/>
    </div>
  </div>
</template>

<script>
  import StatisticsCard from '@/components/partials/onepager/StatisticsCard';

  export default 
    name: 'Statisticts',
    components: StatisticsCard,
    props: 
      kilometers: 
        type: Number,
        required: true
      ,
      trashCollected: 
        type: Number,
        required: true
      ,
      photosTaken: 
        type: Number,
        required: true
      ,
    ,
  

School.vue - 这是主要组件，在这里我进行所有相关的 api 调用。渲染 Statistics.vue 以显示来自 api 的所有信息。

<div class="section-grid">
    <Statistics :kilometers="schoolOnepager.statistics.collectedTrashCount"
                :trash-collected="schoolOnepager.statistics.schoolSharedPhotosTrashCount"
                :photos-taken="schoolOnepager.statistics.schoolTotalDistanceWalked"/>
</div>

...

computed: 
    schoolOnepager: function () 
      return this.$store.getters.getSchoolOnepager;
    ,

有没有更好的方法可以做到这一点，而不是定义统计卡组件3次，我可以循环遍历并让它们中的每一个显示具体信息。

【参考方案1】：

你可以创建一个统计对象数组，然后循环它们。

例如在 VueX 商店中：

statistics: [
 
   title: 'kilometers',
   number: 12,
   type: 'GELOPEN'
 ,
 
   title: 'kilometers',
   number: 5,
   type: 'GELOPEN'
 
]

*数据是从 School.vue 请求的，并且从这里存储中的数据发生了变异。在 Statistics.vue 中，数据是一个名为 schoolOnepager 的计算属性，它从 VueX 存储中导入统计数据

然后重构你的模板组件：

<StatisticsCard v-for="(statistic, i) in statistics" key="i" :imageUrl="require('@/assets/img/images/[e-mail]')"
                  :title="statistic.title"
                  :number="statistic.number"
                  :type="statistic.type"/>

【讨论】：

我对此的担忧是，我如何能够通过 api 调用指定哪些数据对卡可见？

好的，有趣的问题。是否意味着在某些情况下您只想显示三分之二的统计数据？

不完全是。当我进行 api 调用时，statisticsCard 中的数字对于每张卡都会有所不同，并且必须匹配来自 api 的相关数据。然后，我在另一个组件中渲染 Statistics.vue，并在其中进行 api 调用。

好的，我想我现在明白了。在这种情况下，您可以将：数字：“公里”更改为数字：12334，例如。该号码将来自您进行的 api 调用。

是的，没错。事实上，如果你看看我的问题“School.vue”是我进行 api 调用的地方，例如，为了检索我会做的公里：“schoolOnepager.statistics.schoolTotalDistanceWalked”

【参考方案2】：

您可以像任何普通元素一样直接在自定义组件上使用 v-for：

<StatisticsCard v-for="(item, index) in items" :key="index"
 :title="'kilometers'"
 :number="item.kilometers"
 :type="item.type"
></StatisticsCard>

如果你的 items 数组应该是这样的

[
 
   title: 'kilometers',
   type: 'stunk'
,

   title: 'hgdfb',
   type: 'dvnvffv'
,
......
]

【讨论】：

当您迭代时，您将发送该特定对象的 attr 作为道具

这样每张卡都会得到它的具体信息