本文实例讲述了vue实现购物车抛物线小球动画效果的方法。分享给大家供大家参考，具体如下：
先上最终效果图，在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果
此文章只写了商品页面购物小球的实现，商品详情页原理类似
实现步骤：
1. 需要三个组件，最下方包含蓝色购物车的【购物车】组件shopCart.vue（子组件），每个【加减号】组成的购物小球组件cartControl.vue（子组件），和包含每个商品信息的goods组件goods.vue（父组件）
2. 原理，购物小球组件在点击加号的时候对外触发事件，将小球对象本身传递给父组件goods组件，再由goods作为桥梁将这个信息传递给另一个子组件shopCart组件，shopCart组件获取到小球对象后，对该小球进行位置计算，从而实现从不同商品的位置添加商品的抛物线小球效果
3. cartControl.vue部分代码
html代码
<div class="cartControl">
<transition name="move">
<!--减少商品-->
<div class="decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart">
<span class="inner iconfont"></span>
</div>
</transition>
<!--增加商品-->
<div class="count" v-show="food.count>0">{{food.count}}</div>
<!--点击加号按钮，触发事件addCart，将事件对象作为参数传递-->
<div class="add iconfont" @click.stop.prevent="addCart($event)"></div>
</div>js代码
// addCart事件
addCart (event) {
if (!event._constructed) return // 检测事件派发是否来自于better-scroll
if (!this.food.count) {
// 当给一个观测对象添加一个它不存在的属性的时候，直接赋值是不可以的，需要使用Vue.set设置这个属性
Vue.set(this.food, 'count', 1)
} else {
this.food.count++
}
this.$emit('cart-add', event.target) // 向父组件触发一个自定义的cart-add事件，同时将事件对象传递给父组件
},4. goods.vue部分代码
html代码
<!--加减商品-->
<div class="cartControl-wrapper">
<!--在父组件监听到子组件触发的cart-add事件-->
<cart-control :food="food" @cart-add="handlecartAdd"></cart-control>
</div>js代码 知识点：子组件和父组件之间的数据传递
_drop (target) { // 在goods.vue定义 _drop方法将cartcontrol的传递过来target对象再传递给shopCart
