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省去。