Vue.js中如何在v-for循环中为组件传递两个Props

有两种常用方法可以实现你的需求：

方法一：利用循环索引匹配对应数值 #

因为你的cardItems和cardNumbers数组是一一对应的，长度完全一致，所以可以在v-for循环时获取当前项的索引，通过索引从cardNumbers数组中取出对应位置的数值，传递给cardNumber prop。

修改后的父组件模板代码：

<template>
     <div class="row m-auto">
            <HighlightCard 
                v-for="(itemCard, index) in cardItems" 
                :key="index"
                :cardItem="itemCard"
                :cardNumber="cardNumbers[index]"
                class="col m-3"/>
      </div>
</template>

方法二：重构数据为对象数组（更推荐） #

将两个独立的数组整合成一个包含完整卡片数据的对象数组，这种方式让数据结构更清晰，避免依赖索引可能带来的潜在问题，后续维护也更方便。

修改父组件的data部分： #

<script>
import HighlightCard from './HighlightCard.vue';
export default {
    name: 'TopDashboard',
    components: {
        HighlightCard
    },
    data () {
        return {
            cards: [
                { item: 'Impressões', number: '2.300' },
                { item: 'Cliques', number: '259' },
                { item: 'Conversões', number: '45' },
                { item: 'Custo', number: 'R$ 350,00' }
            ]
        }
    }
}
</script>

对应的模板代码： #

<template>
     <div class="row m-auto">
            <HighlightCard 
                v-for="(card, index) in cards" 
                :key="card.item" <!-- 使用唯一的item值作为key，比index更符合Vue的最佳实践 -->
                :cardItem="card.item"
                :cardNumber="card.number"
                class="col m-3"/>
      </div>
</template>

内容的提问来源于stack exchange，提问作者João Denari