vue父组件中v-for循环调用子组件

子组件craNum.vue:

<template>
    <div>
        <div>
            <div>
                {{text}}
            </div>
            <div class="num mf" >
              <number-scrollUp :value = "num" ></number-scrollUp>
            </div>
            <div>{{unit}}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        text: {
            default: '卸货车辆'
        },
        num: {
            default: 0
        },
        unit: {
            default: '辆'
        }
    },
    mounted() {
        this.oldNum = this.num;
    }
}
</script>

　　父组件：

<cart-num

                style="margin-right: .08rem;"

                v-for="(item, key) in numList"

                :key="key"

                :text="item.text"

                :num="item.num"

                :unit="item.unit"

            ></cart-num>

 

script：

import cartNum from './component/carNum';

export default {

    data() {

        return {

            numList: [

{

                        text: '订货户数',

                        num: this.summaryData.allQuantCustomer,

                        unit: '户'

                    },

                    {

                        text: '订单数量',

                        num: this.summaryData.allQuantDelivery,

                        unit: '条'

                    },

                    {

                        text: '订单金额',

                        num: this.summaryData.allAmountDelivery,

                        unit: '万元'

                    },

                    {

                        text: '分拣品规',

                        num: this.summaryData.allProductGauge,

                        unit: '个'

                    }

]

}

}

}

部分css省去。