vue2.0中废弃了events和$dispatch,改用$emit实现监听事件(关于用vue2写某外卖APP项目的教学视频)

goods.vue组件:

在methods添加cartAdd函数

监听v-on:cart-add="cartAdd"，

购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数;

对应cartcontrol.vue中methods下的addCart()函数里的:

this.$emit('cart-add', event.target);

这句话的意思是提交名为'cart-add'的事件给父组件;

```html

  <cartcontrol 
  :food="food" 
  v-on:cart-add="cartAdd"
  >
  </cartcontrol>

```

```html
<shopcart 
  ref="shopcart" 
  :select-foods="selectFoods" 
  :delivery-price="seller.deliveryPrice"   
  :min-price="seller.minPrice"
  >
</shopcart>
```

```ecmascript 6
methods: {
　cartAdd (el) {
    // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
　  this.$nextTick(() => {
      // 调用shopcart组件的drop()函数
　    this.$refs['shopcart'].drop(el);　
    });
  }
}
```
 
cartcontrol.vue组件:

```javascript
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'事情给父组件，第二个是要传递的参数
} 
```

 
shopcart.vue组件:

```javascript
methods: {
    drop(el) {
        console.log(el); // 点击加号看是否输出成功
    }
}
```

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

子组件cartcontrol的addCart()里,

用this.$emit('cart-add',event.target)方法获取<添加按钮>,

并把这个DOM元素以'cart-add'名字传递给父组件goods;

父组件goods用v-on:cart-add="cartAdd"监听传来的cart-add事件，

监听到就调用cartAdd()函数处理;

cartAdd()函数里这句this.$refs['shopcart'].drop(el);

调用shopcart.vue组件的drop()函数,看是否打印出当前参数．




希望能给困在其中的小伙伴们一点帮助