如何在Vue.js中通过子组件值修改父组件的Total值

核心思路遵循Vue的单向数据流原则：父组件统一维护所有商品的状态（数量、单价等），子组件仅负责接收状态、展示UI和触发交互事件，父组件响应事件更新状态后自动计算总金额。

1. 修改子组件（v-item.vue） #

子组件不再自行维护数量和小计数据，改为从父组件接收数量参数，点击按钮时通知父组件调整对应商品的数量：

<template>
  <div class="item__body">
    <div class="item__body__content">
      <img src="" alt="" class="item__body__content__img">
      <!-- 直接通过计算属性显示当前商品小计 -->
      <p>{{ totalOfItem }}</p>
      <p class="item__body__content__title">{{ title }}</p>
      <p class="item__body__content__price">{{ price }}</p>
      <div class="item__body__content__control">
        <!-- 点击按钮时触发自定义事件，传递数量变化的差值 -->
        <button class="item__body__content__btn sell" @click="$emit('update-count', -1)">sell</button>
        <input type="text" class="item__body__content__input" :value="count">
        <button class="item__body__content__btn buy" @click="$emit('update-count', 1)">buy</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    price: Number,
    count: Number // 新增：接收父组件传递的商品数量
  },
  computed: {
    // 实时计算当前商品的小计，无需维护data变量
    totalOfItem() {
      return this.count * this.price
    }
  }
}
</script>

2. 修改父组件 #

父组件维护所有商品的完整状态，监听子组件的事件更新商品数量，并通过计算属性自动计算总金额：

<template>
  <div class="section__wrapper">
    <h1>Total: {{ total }}</h1>
    <!-- 通过循环渲染商品，后续新增商品只需在items数组中添加即可 -->
    <vItem 
      v-for="item in items" 
      :key="item.title"
      :title="item.title" 
      :price="item.price"
      :count="item.count"
      @update-count="updateItemCount(item.title, $event)"
    ></vItem>
  </div>
</template> 

<script>
import vItem from './v-item.vue';
export default {
  data(){
    return{
      // 存储所有商品的基础数据和当前数量
      items: [
        { title: 'First Item', price: 2, count: 0 },
        { title: 'Second Item', price: 3, count: 0 }
      ]
    }
  },
  components: {
    vItem
  },
  computed: {
    // 自动计算总金额，商品数量变化时会实时更新
    total() {
      return this.items.reduce((sum, item) => {
        return sum + item.count * item.price
      }, 0)
    }
  },
  methods: {
    // 处理子组件传来的数量更新请求
    updateItemCount(title, change) {
      const targetItem = this.items.find(item => item.title === title)
      if (targetItem) {
        targetItem.count += change
        // 可选：添加数量边界限制，避免出现负数
        // targetItem.count = Math.max(0, targetItem.count)
      }
    }
  }
}
</script>

方案优势 #

• 符合Vue单向数据流设计，避免子组件私自修改状态导致的逻辑混乱
• 计算属性自动同步金额，无需手动编写更新逻辑，减少冗余代码
• 父组件统一管理商品数据，后续扩展商品或调整逻辑更便捷

内容的提问来源于stack exchange，提问作者Arman