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

子组件craNum.vue:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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