如何在v-for中将数据从父组件绑定到子组件

Question

所以我有一个像这样的模态组件

<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
<table>
  <tr>
    <th style="width:300px">Description</th>
    <th style="width:300px">Quantity</th>
    <th style="width:300px">Unit Price</th>
    <th style="width:300px">Amount (Rp. )</th>
  </tr>
  <tr v-for="(item, ind) in invoiceDetails.chargesList" :key="ind" class="h-2">
    <td>{{ item.description }}</td>
    <td>{{ item.qty }}</td>
    <td>{{ item.unitPrice }}</td>
    <td>{{ item.totalPrice }}</td>
  </tr>
  <tr v-for="(invoiceProduct, k) in invoiceProducts" :key="k">
    <td>
      {{ invoiceProduct.name }}
    </td>
    <td>
      {{ invoiceProduct.qty }}
    </td>
    <td>
      {{ invoiceProduct.price }}
    </td>
    <td>
      {{ invoiceProduct.lineTotal }}
    </td>
  </tr>
  <tr class="h-2">
    <td>Subtotal :</td>
    <td>{{ subtotalCharges }}</td>
  </tr>
  <tr class="h-2">
    <td>Tax(10%) :</td>
    <td>{{ taxedCharges }}</td>
  </tr>
  <tr class="h-2">
    <td>Total :</td>
    <td>{{ totalCharges }}</td>
  </tr>
</table>

，如您所见，有2个v-for。如何绑定父组件中的数据？第一个循环是我从api获取的数据，第二个循环是从动态添加一行数据

这是父组件：

<template>
  <div>
   <PreviewModal
   :dialogTableVisible="dialogTableVisible"/>
  </div>
</template>

<script>
 export default {
  data() {
   return {
     invoiceProducts: []
   }
 }
}
</script>

“ invoiceProducts”将通过添加表格的新行来填充，这是json：

"chargesList": [
        {
            "description": "Ocean Freight (Measurement: 5.75 CBM)",
            "qty": "1",
            "unitPrice": "57.5",
            "unitBy": "-",
            "totalPrice": "57.5"
        },
        {
            "description": "Charge1",
            "qty": "1",
            "unitPrice": "10",
            "unitBy": "-",
            "totalPrice": "10"
        },
        {
            "description": "Fast",
            "qty": "1",
            "unitPrice": "20",
            "unitBy": "-",
            "totalPrice": "20"
        }
    ]