用 emit 实现购物车数量联动需子组件只 emit 意图（如 'update:count'），父组件统一校验、更新状态并触发响应式刷新；推荐 v-model:count 绑定，配合 Pinia 同步导航栏徽标，加节流防连点，校验与错误回滚均在父组件处理。

用 emit 实现购物车数量加减联动，关键是让子组件“只提需求”，父组件“统一决策”。不直接改子组件的 prop，而是通过事件把操作意图（比如“加1”或“减1”）告诉父组件，由它来校验、更新状态并触发视图刷新——这样既守住单向数据流原则，又保障了边界控制和响应式有效性。

子组件：封装按钮，只 emit 操作意图

子组件（如 CartItem.vue）接收 count 和 id，但不直接修改它们：

• 用 defineProps 声明 count: Number 和 id: String
• 用 defineEmits 显式声明事件，例如 ['update:count', 'changeCount']
• 点击「+」时调用 emit('update:count', count + 1)
• 点击「−」时先判断 count > 1，再 emit 新值，避免出现 0 或负数
• 按钮可加 :disabled="count 提供视觉反馈

父组件：响应事件，集中管理状态

父组件（如 ShoppingCart.vue）持有购物车列表，每个商品是响应式对象：

• 推荐写法：对子组件使用 v-model:count="item.count"，Vue 自动绑定 update:count 事件
• 手动监听写法：@changeCount="newVal => item.count = newVal"，需确保传参明确（建议同时传 id 和 newVal）
• 所有更新都落在原数组项上，例如 cartItems[index].count = newVal，保持响应式追踪
• 总价用 computed 实时计算，无需额外触发

跨组件同步：通知导航栏等兄弟模块

购物车数量变化后，顶部导航栏的徽标也要更新。这时不能让子组件直接通知导航栏，而应通过“状态提升”或轻量通信：

• 方案一（推荐）：父组件更新本地状态后，同步写入 Pinia store，导航栏用 store.cartCount 响应式读取
• 方案二（解耦强）：用 mitt 触发全局事件，如 eventBus.emit('cart-updated', { count: total })，导航栏监听即可
• 避免用 $emit 跨多层传递，否则链路过长、难以维护

防错与优化：别让连点搞崩逻辑

用户快速连点加减按钮，容易引发重复事件或无效请求：

• 子组件内可简单节流：比如点击后设 isProcessing = true，500ms 内忽略后续点击
• 父组件处理数量变更时，若需调接口，应对请求加防抖；但本地计数仍要立刻更新，保证 UI 反馈及时
• 服务端返回失败时，在父组件中回滚 item.count 到变更前的值，并提示用户
• 所有输入校验（如库存不足）统一放在父组件，子组件只负责发起动作