使用vue3子组件给父组件传值实现数据加减

在Vue 3中，通过props从子组件向父组件传递数据是一种常见的通信方式。当需要在子组件中实现对数据的增减操作，并将结果返回给父组件更新状态，可以按照以下步骤进行：

1. **父组件**：
- 定义一个data属性作为需要传递给子组件的数据，比如`count`。

   export default {
     data() {
       return { count: 0 };
     },
     // 其他方法...
   }

2. **父组件模板**：
- 在模板中引用子组件并绑定`props`，这里是`value`，表示子组件将修改后的数值返回给父组件。

   <template>
     <div>
       <child-component :value="count" @updateCount="handleUpdateCount"></child-component>
       <p>当前值: {{ count }}</p>
     </div>
   </template>

3. **父组件方法**：
- 创建一个处理子组件更新回调的方法，例如`handleUpdateCount`，接收子组件传递的新值并更新`count`。

   methods: {
     handleUpdateCount(newCount) {
       this.count = newCount;
     }
   }

4. **子组件**：
- 接收`value`属性，定义一个计算属性或者方法（比如`increment`和`decrement`），分别用于增加和减少数值。

   import { ref } from 'vue';

   export default {
     props: ['value'],
     setup(props) {
       const countRef = ref(props.value);
       
       function increment() {
         countRef.value++;
         // 发送更新事件给父组件
         this.$emit('updateCount', countRef.value);
       }

       function decrement() {
         countRef.value--;
         // 同上
         this.$emit('updateCount', countRef.value);
       }

       return { count: countRef, increment, decrement };
     }
   }

然后在子组件的模板中添加按钮，点击后调用对应的函数。

现在，当你在子组件的`increment`或`decrement`方法中改变`countRef`的值，会触发`updateCount`事件，父组件会自动更新显示的`count`值。