题目描述
请创建一个Vue应用，包含以下功能：
1.
父组件包含一个购物车组件
2.
子组件是商品列表，包含多个商品项
3.
每个商品项有"加入购物车"按钮
4.
点击按钮时，商品信息传递给父组件
5.
父组件实时显示购物车中的商品数量
6.
父组件可以清空购物车，并通知子组件重置状态
要求
使用Vue 3 Composition API
实现父子组件双向通信
使用props和emits
商品数据至少包含：id、name、price
💡 题解
- 父组件 (App.vue)
Vue购物车练习
<!-- 购物车信息 --> <div class="cart-info"><h2>购物车</h2><p>商品数量: {{ cartItems.length }}</p><button @click="clearCart" :disabled="cartItems.length === 0">清空购物车</button><!-- 购物车商品列表 --><div v-if="cartItems.length > 0" class="cart-items"><div v-for="item in cartItems" :key="item.id" class="cart-item">{{ item.name }} - ¥{{ item.price }}</div><div class="total">总价: ¥{{ totalPrice }}</div></div> </div><!-- 商品列表组件 --> <ProductList @add-to-cart="handleAddToCart" :reset-signal="resetSignal" />- 子组件 (ProductList.vue)
商品列表
{{ product.name }}
¥{{ product.price }}
{{ product.description }}
🎯 知识点总结
- 父子组件通信方式
Props Down: 父组件通过props向子组件传递数据
Events Up: 子组件通过emit向父组件发送事件 - Vue 3 Composition API
defineProps(): 定义组件接收的props
defineEmits(): 定义组件可发出的事件
ref(): 创建响应式数据
computed(): 创建计算属性
watch(): 监听数据变化 - 核心概念
单向数据流: 数据从父组件流向子组件
事件通信: 子组件通过事件向父组件传递信息
状态管理: 在父组件中集中管理状态 - 扩展思考
如何优化重复添加商品的逻辑？
如果商品很多，如何实现分页？
如何添加商品数量的增减功能？
如何实现商品的删除功能？
明日预告: 下一题将学习Vue的插槽(Slots)使用，构建可复用的组件模板！
- 父子组件通信方式
- 子组件 (ProductList.vue)