vue2.0子组件向父组件传递数据（饿了么例子）vue2.0废弃$dispatch,替换成$emit 和$refs

vue2.0废弃$dispatch,替换成$emit 和$refs，使用方法如下（根据慕课饿了么案例，教程上的写法要改［为了购物车小球抛下的动画］）：

// goods.vue组件－－使用v-on监听 <div class="cartcontrol-wrapper">   <cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol> </div> 在methods添加cartAdd函数 // 监听v-on:cart-add="cartAdd"，购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数， // 对应cartcontrol.vue中methods里面addNum()函数里的this.$emit('cart-add', event.target); 这句提交名为'cart-add'的事件给父组价． methods: { 　　cartAdd(el) { 　　　　　　　　　 // dom元素更新后执行， 因此此处能正确打印出更改之后的值； 　this.$nextTick(() => { 　this.$refs['shopcart'].drop(el);　//调用shopcart组件的drop()函数 }); } }

1 2	good.vue  // v-el的写法在vue2.0中已经废弃，现在全部采用　ref和$ref 绑 定Dom节点元素 <shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>

1 2 3 4 5 6 7 8 9 10 11

// cartcontrol.vue组件 addCart(event) {   if (!event._constructed) {     return;   }   if (!this.food.count) {      Vue.set(this.food, 'count', 1);   } else {       this.food.count++;   }   this.$emit('cart-add', event.target); //添加这句，提交'cart-add'事情给父组件，第二个是要传递的参数 },// cartcontrol.vue组件

1 2 3 4 5

// shopcart.vue组件的drop（）函数 methods: {     drop(el) {         console.log(el);     } }// shopcart.vue组件

子组件向父组件传递过程梳理：

目标：把自组件cartcontrol的addCart（）里用this.$emit('cart-add',event.target)这句，获取并把添加按钮这个ＤＯＭ元素以'cart-add'名字传递给父组件good.vue,

传给父组件good.vue，父组件里面的

<cartcontrol :food="food"  v-on:cart-add="cartAdd"></cartcontrol>用v-on:cart-add="cartAdd"　表示监听传来的cart-add事件，监听到就调用cartAdd()函数处理，

cartAdd()函数里这句this.$refs['shopcart'].drop(el);调用shopcart组件的drop()函数

shopcart.vue组件的函数是打印出当前参数．