Thu May 4 10:46:00 UTC 2023 inscode

src/App.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <Header title="购物车案例"></Header>
     <!-- 循环渲染每个商品 -->
-    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :pic="item.goods_img" :state="item.goods_state"
+    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :thumbnail="item.goods_img" :isChecked="item.goods_state"
       :id="item.id" :price="item.goods_price" :count="item.goods_count" @change-state="updateGoodState"></Goods>
     <!-- 渲染底部组件 -->
     <Footer :checked="allChecked" :total-amount="totalAmount" :total-count="totalCount" @change-all-state="changeAllState"></Footer>

src/components/Footer/Footer.vue

@@ -2,7 +2,7 @@
   <div class="footer-container">
     <!-- 左侧的全选 -->
     <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="isChecked"  @change="toggleAllGoods"/>
+      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="checked"  @change="toggleAllGoods"/>
       <label class="custom-control-label" for="cbFull">全选</label>
     </div>
 
@@ -20,7 +20,7 @@
 <script>
 export default {
   props:{
-    isChecked:{
+    checked:{
       default: true, // 是否全选默认为 true
       type:Boolean,
     },
@@ -36,7 +36,7 @@ export default {
   methods:{
     // 切换所有商品的选中状态
     toggleAllGoods(e){
-     this.$emit('changeAllGoodsState', { value: e.target.checked });
+     this.$emit('change-all-state', { value: e.target.checked });
     },
   }
 }

src/components/Goods/Goods.vue

@@ -69,7 +69,7 @@ export default {
     // 切换商品选中状态
     toggleGoodsChecked(e) {
       // 触发一个自定义事件，将商品 ID 和选中状态传递给父组件
-      this.$emit('changeGoodsCheckedState', { id: this.id, isChecked: e.target.checked });
+      this.$emit('change-state', { id: this.id, isChecked: e.target.checked });
     },
   },
 }