使用Emit实现购物车数量加减的核心是子组件通过$emit向父组件传递变更意图，由父组件统一管理状态；Vue 3推荐用defineEmits显式声明update:count事件，配合v-model实现双向通信，子组件校验边界（如≥1），父组件响应更新并确保响应式。
使用 Emit 实现购物车数量加减，核心是子组件通过 $emit 向父组件传递变更意图，由父组件统一管理状态并响应更新。Vue 3 中推荐用 defineEmits 显式声明事件，配合 v-model 或自定义事件实现双向通信逻辑。
子组件：封装加减按钮并触发 emit
子组件（如 CartItem.vue）不直接修改传入的 count，而是提供「加」「减」操作，并通过 emit 通知父组件需要变更：
- 用
defineProps接收当前数量count和唯一标识id - 用
defineEmits声明update:count（支持 v-model）或自定义事件如changeCount - 点击「+」时调用
emit('update:count', count + 1)；点击「−」时检查最小值（如 ≥1），再 emit 新值
示例片段：
{{ count }}
父组件：用 v-model 或监听事件同步状态
父组件中，将购物车条目数据存在响应式数组（如 cartItems）里，每个对象含 id 和 count：
- 方式一（推荐）：对子组件使用
v-model:count="item.count"，自动绑定update:count事件 - 方式二：手动监听事件，如
@changeCount="val => item.count = val"，需确保传参明确（如同时传id和新值） - 关键点：所有数量变更必须更新原数组中的对应项，避免直接修改 prop 或丢失响应性（如用
cartItems[index].count = newVal是有效的）
确保响应式更新与边界控制
购物车数量不能为负数或非数字，逻辑应在父组件或子组件中统一约束：
- 子组件内做基础校验（如减到 1 就禁用「−」按钮，或点击时限制最小值）
- 父组件收到新值后，可进一步校验（例如库存不足时重置为最大可购数）
- 若使用
v-model，Vue 会自动把item.count当作响应式引用，赋值即触发视图更新
进阶：批量更新与防抖优化
高频点击（如连点）可能导致多次 emit 和重复计算，可考虑：
- 子组件内部节流：用
setTimeout延迟 emit，合并连续操作 - 父组件中对 count 变更做防抖处理（尤其涉及接口请求时），但注意不要影响本地实时反馈
- 如需异步保存（如调用 API 更新服务器），应在父组件中发起，并在成功后更新本地状态，失败时回滚显示
