Vue中两个子组件向父组件传值时总值重置问题求解

核心问题分析 #

1. ref值修改错误：父组件中total是ref响应式对象，直接赋值total = value * 2会覆盖ref引用，而非更新响应式值，必须操作total.value属性。
2. 传递值逻辑偏差：子组件传递的是自身累计的amount值，而非单次点击的增量（1或-1），导致切换子组件时，新子组件的初始amount为0，传递的数值会直接覆盖父组件total，而非累加。

修正步骤 #

1. 调整子组件：传递单次点击的增量

两个子组件逻辑一致，修改点击事件的$emit参数，直接传递单次变化量：

<script setup>
import { ref } from "vue";
const amount = ref(0);
</script>

<template>
  <div>
    <div class="buttons">
      <button
        class="button2"
        @click="amount--, $emit('reduce', -1)"
      ></button>
      <p class="amount">{{ amount }}</p>
      <button
        class="button1"
        @click="amount++, $emit('increment', 1)"
      ></button>
    </div>
  </div>
</template>

2. 修正父组件：正确执行累加逻辑

修改事件处理函数，基于当前total值进行累加，并正确操作响应式属性：

<script setup>
import ChildComp1 from "./ChildComp1.vue";
import ChildComp2 from "./ChildComp2.vue";
import { ref } from "vue";

const total = ref(0);

// 统一处理增减逻辑，简化代码
const updateTotal = (value) => {
  total.value += value * 2;
};
</script>

<template>
  <div>
    <ChildComp1
       @increment="updateTotal"
       @reduce="updateTotal"
    />

    <ChildComp2
       @increment="updateTotal"
       @reduce="updateTotal"
    />

    <h3><span>Total:</span> ${{ total }}.00</h3>
  </div>
</template>

效果说明 #

• 子组件每次点击传递的是固定增量（1或-1），不再依赖自身累计值，切换子组件时不会传递初始0值。
• 父组件通过updateTotal函数在当前total基础上累加计算，实现total值持续累加/递减，不受子组件切换影响。

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