Vue每日一题 父子组件通信

题目描述
请创建一个Vue应用，包含以下功能：
1.
父组件包含一个购物车组件
2.
子组件是商品列表，包含多个商品项
3.
每个商品项有"加入购物车"按钮
4.
点击按钮时，商品信息传递给父组件
5.
父组件实时显示购物车中的商品数量
6.
父组件可以清空购物车，并通知子组件重置状态
要求
使用Vue 3 Composition API
实现父子组件双向通信
使用props和emits
商品数据至少包含：id、name、price
💡 题解

1. 父组件 (App.vue)
   
   2. 子组件 (ProductList.vue)
      

      🎯 知识点总结

      1. 父子组件通信方式
         Props Down: 父组件通过props向子组件传递数据
         Events Up: 子组件通过emit向父组件发送事件
      2. Vue 3 Composition API
         defineProps(): 定义组件接收的props
         defineEmits(): 定义组件可发出的事件
         ref(): 创建响应式数据
         computed(): 创建计算属性
         watch(): 监听数据变化
      3. 核心概念
         单向数据流: 数据从父组件流向子组件
         事件通信: 子组件通过事件向父组件传递信息
         状态管理: 在父组件中集中管理状态
      4. 扩展思考
         如何优化重复添加商品的逻辑？
         如果商品很多，如何实现分页？
         如何添加商品数量的增减功能？
         如何实现商品的删除功能？
         明日预告: 下一题将学习Vue的插槽(Slots)使用，构建可复用的组件模板！