Vue每日一题 - 组件通信与事件处理

📝 题目描述
创建一个简单的购物车应用，要求实现以下功能：
1.
父组件 ShoppingCart 包含商品列表
2.
子组件 ProductItem 显示单个商品信息（名称、价格、数量）
3.
实现以下交互功能：
点击「+」按钮增加商品数量
点击「-」按钮减少商品数量（最小为0）
在父组件中显示购物车总价
当商品数量为0时，该商品应该从购物车中移除
🎯 考查知识点
组件间通信（props / emit）
事件处理
计算属性
条件渲染
数组操作
——————————————
💡 题解
父组件 - ShoppingCart.vue

子组件 - ProductItem.vue

🔍 解题要点
1.
Props传递数据：父组件通过 props 向子组件传递商品信息
2.
事件通信：子组件通过 $emit 向父组件发送事件
3.
计算属性：使用 computed 计算总价和单项小计
4.
条件渲染：使用 v-if 处理空购物车状态
5.
数组操作：使用 filter 和 find 方法操作购物车数据
🚀 扩展练习
1.
添加商品图片显示
2.
实现购物车数据持久化（localStorage）
3.
添加商品搜索功能
4.
实现批量删除功能
这道题目涵盖了Vue的核心概念，适合正在学习Vue组件通信的同学练习！