$emit 实现购物车数量联动更新的核心是“子改→父收→全局同步”，子组件通过 update-quantity 事件传 {id, value} 对象，父组件更新数据源后触发所有依赖项自动响应，并在子组件中做库存与边界校验。
用 $emit 实现购物车商品数量加减的联动更新，核心是“子改→父收→全局同步”。不是靠子组件自己改数据，而是把操作意图发给父组件，由父组件统一维护数据源，再让所有依赖它的子组件自动响应变化。
子组件触发 emit：明确传参结构
在商品项（如 Goods 或 ProductCard）里，加减按钮不直接修改本地数量，而是通过 $emit 把动作和目标值发出去：
- 事件名建议用 kebab-case，比如
"update-quantity"，语义清晰且兼容 Vue3 - 参数推荐传对象，包含
id（商品唯一标识）和value（新数量），避免歧义 - 示例写法：
this.$emit("update-quantity", { id: this.good.id, value: this.good.goods_count + 1 })
父组件监听并更新数据源
父组件（通常是购物车列表或 App 根组件）用 @update-quantity 接收事件，并在 methods 中更新原始数据数组：
- 找到对应商品项，直接修改其
goods_count字段（注意不是深拷贝后替换整个对象，否则响应式可能失效） - 如果用的是 Vue2 的 data 数组，确保用
Vue.set或索引赋值方式保证响应式生效 - Vue3 组合式 API 中，若用 ref 包裹数组，直接修改即可；若用 reactive，也支持直接赋值
联动依赖自动刷新
只要父组件的数据源更新了，所有用到该数据的地方都会响应式更新：
- Goods 组件中
v-bind:num="good.goods_count"会立刻重渲染 - Footer 组件里通过 computed 计算总数量，也会重新求值
- 如果用了 v-model 双向绑定在数量输入框上，它会自动同步显示新值
补充细节：库存校验和边界控制
加减逻辑不能只靠前端视觉反馈，要在 emit 前做基础判断：
- 减操作前检查当前数量是否 > 1，避免出现 0 或负数
- 加操作前对比库存
stock，超过则截断为最大可选数，并提示用户 - 这些判断放在子组件内，但最终是否执行仍由父组件决定——它可选择忽略非法请求，或返回错误状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
