本文实例讲述了vue实现购物车抛物线小球动画效果的方法分享给大家供大家参考，具体如下：

先上最终效果图在商品页面和商品详情頁面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果

此文章只写了商品页面购物小球的实现，商品详情页原理类似

1. 需要彡个组件最下方包含蓝色购物车的【购物车】组件shopCart.vue（子组件），每个【加减号】组成的购物小球组件cartControl.vue（子组件）和包含每个商品信息嘚goods组件goods.vue（父组件）

2. 原理，购物小球组件在点击加号的时候对外触发事件将小球对象本身传递给父组件goods组件，再由goods作为桥梁将这个信息传遞给另一个子组件shopCart组件shopCart组件获取到小球对象后，对该小球进行位置计算从而实现从不同商品的位置添加商品的抛物线小球效果

 <!--点击加號按钮，触发事件addCart将事件对象作为参数传递-->