要实现这个组件的效果，以及和底部购物车联动的效果
这个组件能获取父组件foods上每个商品的数据，而且点击增加可以增加，点击删除可以删除
新建一个组件叫做cartcontrol，因为每一道菜都应该有这个组件，所以在goods父组件循环遍历goods出的food中把每一项food传递到子组件中去
在这个组件中接收food，是一个对象
写好这个组件的骨架，并且给他添加点击事件，并根据是商品的数量来决定是否显示
编写这个业务组件的逻辑方法还是比较简单的，但是在这其中踩了两个坑
一个是food.count外部传递进来的food中并没有这个字段，所以引用了全局vue中的接口set方法，给其新增一个count字段
另一个是外部的food因为也引用了better-scroll，要使用点击事件要在better-scroll初始化构造函数时候设置click为true
到这里最基本的业务逻辑已经over了，接下来给这个组件增加一些动画，让其不那么生硬
暂时的动画方案是点击增加按钮的时候左侧减号按钮滚动至右边，因为要做这个效果所以得把左边组件给拆分开来
外部做平移动画，内部做滚动动画，在外面给他套上一个transition层来添加过度动画，编写的less如下
到这里就完成了动画的编写，去浏览器上测试一下效果
之前我们通过vue.set方法给商品添加了count属性，因此改变的food数据传递到了外部组件，就可以在food组件中使用一个selectFoods方法获取这些被选中的数据
在food组件中新增加一个计算属性，通过双重循环遍历出被选中food的数据：
传递到购物车组件中替换掉之前模拟被选择的数据
好啦，到这里这个组件就完成了，并且做到了和底部购物车的联动
接下来再完善一下这个组件，给这个点击事件添加一个抛物线动画，点击以后让其能够抛送到购物车中
这个动画比较复杂，因为每个小球的距离顶部的高度都不同，而且用户多次点击，就会有多次飞入的效果
首先是点击添加商品按钮，要给他派发一个事件传递到父组件中去：
在cartcontrol组件的添加方法，通过$emit派发到父组件中去
goods父组件中接收：
再获取到购物车的DOM元素：
这样就可以在购物车组件中获取到cartcontrol子组件传递过去的数据了
在shopcart中添加一个drop方法：
给其定义一个球的数组存放做动画的球，还有一个已经掉落球的数组
小球动画给他三个动画事件钩子
完善drop方法：
实现这三个动画钩子
样式如下：
在这里就完成了小球掉落的动画效果
代码已上传至码云：
https://gitee.com/delisteam/ele-app-cart