vue3中，存款页面的选择框里的数据发送给另一页面表格里与账号相对应的余额，实现加法并更新余额

在Vue3中，可以使用组件通信来实现存款页面的选择框里的数据发送到另一个页面表格里与账号相对应的余额，并实现加法并更新余额。

具体实现步骤如下：

1. 在存款页面创建一个组件，用来输入存款金额和选择账号。在组件中，使用`v-model`指令来实现数据的双向绑定。

2. 在表格页面创建一个组件，用来显示账号和余额。在组件中，使用`props`属性来接收从存款页面传递过来的数据，并将数据显示在页面上。

3. 在存款页面组件中，使用`$emit`方法来触发一个事件，并将选择的账号和存款金额作为参数传递给父组件。

4. 在父组件中，使用`$emit`方法将事件和参数传递给表格页面组件。

5. 在表格页面组件中，使用`watch`属性监听变量的变化，并在变化时更新余额。

示例代码如下：

存款页面组件：

<template>
  <div>
    <label for="account">选择账号：</label>
    <select id="account" v-model="selectedAccount">
      <option v-for="account in accounts" :key="account.id" :value="account.id">{{account.name}}</option>
    </select>
    <br>
    <label for="amount">存款金额：</label>
    <input type="number" id="amount" v-model="depositAmount">
    <br>
    <button @click="deposit">存款</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accounts: [
        {id: 1, name: '账号1'},
        {id: 2, name: '账号2'},
        {id: 3, name: '账号3'},
      ],
      selectedAccount: 1,
      depositAmount: 0,
    }
  },
  methods: {
    deposit() {
      this.$emit('deposit', this.selectedAccount, this.depositAmount);
    }
  }
}
</script>

表格页面组件：

<template>
  <table>
    <thead>
      <tr>
        <th>账号</th>
        <th>余额</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="account in accounts" :key="account.id">
        <td>{{account.name}}</td>
        <td>{{account.balance}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    accounts: {
      type: Array,
      required: true,
    }
  },
  watch: {
    accounts: {
      handler(accounts) {
        this.updateBalance(accounts);
      },
      deep: true,
    }
  },
  methods: {
    updateBalance(accounts) {
      accounts.forEach(account => {
        if (account.id === this.selectedAccount) {
          account.balance += Number(this.depositAmount);
        }
      });
    }
  }
}
</script>

父组件：

<template>
  <div>
    <DepositPage @deposit="handleDeposit"></DepositPage>
    <TablePage :accounts="accounts"></TablePage>
  </div>
</template>

<script>
import DepositPage from 'xxx';
import TablePage from 'xxx';

export default {
  components: {
    DepositPage,
    TablePage,
  },
  data() {
    return {
      accounts: [
        {id: 1, name: '账号1', balance: 100},
        {id: 2, name: '账号2', balance: 200},
        {id: 3, name: '账号3', balance: 300},
      ]
    }
  },
  methods: {
    handleDeposit(accountId, amount) {
      this.accounts.forEach(account => {
        if (account.id === accountId) {
          account.balance += Number(amount);
        }
      });
    }
  }
}
</script>