vue父元件中v-for迴圈呼叫子元件
阿新 • • 發佈:2022-03-08
子元件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省去。