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

在Vue3中使用父子组件实现存款页面的选择框里的数据发送给另一页面表格里与账号相对应的余额，可以通过在父组件中定义一个存储选中账户的变量，然后将这个变量作为props传递给子组件，子组件通过监听这个props来获取选中的账户，并且在需要时将数据通过emit自定义事件的方式传递给父组件，父组件再将数据通过props的方式传递给另一个子组件来更新余额。

首先，在父组件中，你需要定义一个存储选中账户的变量，并且将这个变量作为props传递给子组件。例如：

<template>
  <div>
    <deposit-page :selected-account="selectedAccount" @deposit="handleDeposit"></deposit-page>
    <balance-page :accounts="accounts"></balance-page>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import DepositPage from './DepositPage.vue';
import BalancePage from './BalancePage.vue';

export default {
  components: {
    DepositPage,
    BalancePage,
  },
  setup() {
    const selectedAccount = ref(null);
    const accounts = reactive([
      { id: 1, name: 'Account 1', balance: 100 },
      { id: 2, name: 'Account 2', balance: 200 },
      { id: 3, name: 'Account 3', balance: 300 },
    ]);

    function handleDeposit(data) {
      const account = accounts.find(a => a.id === data.account);
      if (account) {
        account.balance += data.amount;
      }
    }

    return {
      selectedAccount,
      accounts,
      handleDeposit,
    };
  },
};
</script>

在这个例子中，我们定义了一个`selectedAccount`变量，并且将这个变量作为props传递给了`DepositPage`子组件。我们还定义了一个`accounts`变量，用于存储所有账户的信息，并且在`handleDeposit`函数中更新余额。在模板中，我们使用`DepositPage`和`BalancePage`子组件来展示存款页面和余额页面。

接下来，在`DepositPage`子组件中，你需要通过props来获取选中的账户，并且在需要时将数据通过emit自定义事件的方式传递给父组件。例如：

<template>
  <div>
    <select v-model="selectedAccount">
      <option v-for="account in accounts" :value="account.id">{{ account.name }}</option>
    </select>
    <input type="number" v-model="depositAmount"></input>
    <button @click="deposit()">Deposit</button>
  </div>
</template>

<script>
import { ref, defineEmits, defineProps } from 'vue';

export default {
  props: {
    selectedAccount: {
      type: Number,
      required: true,
    },
  },
  emits: ['deposit'],
  setup(props) {
    const depositAmount = ref(0);

    function deposit() {
      // 发送选中的账户和存款金额给父组件
      const data = {
        account: props.selectedAccount,
        amount: depositAmount.value,
      };
      // 触发自定义事件
      emit('deposit', data);
    }

    return {
      depositAmount,
      deposit,
    };
  },
};
</script>

在这个例子中，我们通过`defineProps`函数定义了一个props，用于接收父组件传递过来的`selectedAccount`变量。在`setup`函数中，我们使用`defineEmits`函数定义了一个自定义事件`deposit`，用于传递选中的账户和存款金额给父组件。在模板中，我们将选择框和输入框与`depositAmount`变量进行了双向绑定，并且在“Deposit”按钮上添加了一个点击事件，用于触发存款操作。在存款操作中，我们创建了一个包含选中的账户和存款金额的data对象，并且使用`emit`函数触发了名为“deposit”的自定义事件，并且将这个data对象作为参数传递给了这个事件。

最后，在`BalancePage`子组件中，你需要通过props来获取所有账户的信息，并且在父组件中监听`deposit`自定义事件，以更新与选中账户相对应的余额。例如：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Account Name</th>
          <th>Balance</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="account in accounts" :key="account.id">
          <td>{{ account.name }}</td>
          <td>{{ account.balance }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { defineProps, onMounted, onUnmounted } from 'vue';

export default {
  props: {
    accounts: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    function handleDeposit(data) {
      const account = props.accounts.find(a => a.id === data.account);
      if (account) {
        account.balance += data.amount;
      }
    }

    onMounted(() => {
      // 监听自定义事件
      on('deposit', handleDeposit);
    });

    onUnmounted(() => {
      // 取消监听自定义事件
      off('deposit', handleDeposit);
    });

    return {};
  },
};
</script>

在这个例子中，我们通过`defineProps`函数定义了一个props，用于接收父组件传递过来的`accounts`变量。在`setup`函数中，我们定义了一个`handleDeposit`函数，用于在父组件中监听`deposit`自定义事件，并且在事件处理函数中更新与选中账户相对应的余额。在组件挂载和卸载时，我们分别使用`onMounted`和`onUnmounted`函数来监听和取消监听自定义事件。

通过以上的操作，你就可以使用父子组件的方式在Vue3中实现存款页面的选择框里的数据发送给另一页面表格里与账号相对应的余额，并且实现加法并更新余额。