Vue实战—商品分类菜单数量提示（10）

如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。

好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。

注意methods方法中的calculateCount函数实现计算个数，数量来自于增减组件内Cartcontrol。

    calculateCount(spus) {
        console.log(spus)
      let count = 0;
      spus.forEach(food => {
        if (food.count > 0) {
          count += food.count;
        }
      });

      return count;
    },

以上是spus数据

Cartcontrol组件控制商品增减

通过组件Cartcontrol接受了来自父组件的传值，并且我们在组件内添加商品的增减功能。

完善购物车内的数量统计

现在商品分类菜单的数量提示就完成了。