vue3中，存款页面deposit.vue的选择框里的数据发送给另一页面creditCard.vue表格里与账号相对应的余额，实现加法并更新余额,父组件为TableData.vue

你可以通过在父组件TableData.vue中定义一个data属性来保存账户余额数据，然后将这个data属性通过props传递给deposit.vue和creditCard.vue组件。当在deposit.vue中选择了某个账户并且完成了存款操作时，可以通过emit事件将对应的账户和存款金额发送给父组件TableData.vue。在TableData.vue中接收到这些数据后，可以更新相应账户的余额，然后将最新的余额通过props再传递给creditCard.vue组件。在creditCard.vue组件中，可以根据账户的余额来渲染表格数据。

下面是一个示例代码：

TableData.vue:

<template>
  <div>
    <deposit :accounts="accounts" @deposit="updateBalance"></deposit>
    <credit-card :accounts="accounts"></credit-card>
  </div>
</template>
<script>
import Deposit from './Deposit.vue'
import CreditCard from './CreditCard.vue'
export default {
  components: {
    Deposit,
    CreditCard
  },
  data() {
    return {
      accounts: [
        { accountNo: '11111', balance: 1000 },
        { accountNo: '22222', balance: 2000 },
        { accountNo: '33333', balance: 3000 }
      ]
    }
  },
  methods: {
    updateBalance(accountNo, amount) {
      const account = this.accounts.find(acc => acc.accountNo === accountNo)
      account.balance += amount
    }
  }
}
</script>

Deposit.vue:

<template>
  <div>
    <select v-model="selectedAccount">
      <option v-for="acc in accounts" :value="acc.accountNo">{{ acc.accountNo }}</option>
    </select>
    <input type="number" v-model="amount">
    <button @click="deposit">Deposit</button>
  </div>
</template>
<script>
export default {
  props: {
    accounts: Array
  },
  data() {
    return {
      selectedAccount: '',
      amount: 0
    }
  },
  methods: {
    deposit() {
      if (!this.selectedAccount || !this.amount) return
      this.$emit('deposit', this.selectedAccount, this.amount)
      this.selectedAccount = ''
      this.amount = 0
    }
  }
}
</script>

CreditCard.vue:

<template>
  <table>
    <thead>
      <tr>
        <th>Account No.</th>
        <th>Balance</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="acc in accounts" :key="acc.accountNo">
        <td>{{ acc.accountNo }}</td>
        <td>{{ acc.balance }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    accounts: Array
  }
}
</script>