sell-food组件

1. food组件小球的问题

• 根据教程代码应该如下

addFirst (event) {
      if (!event._constructed) {
        return;
      }
      this.$emit('cart-add', event.target);
      Vue.set(this.food, 'count', 1);
    }

可是你会发现不仅第一个小球没有出现，而且cartcontrol组件中的小球也没有出现
教程使用vue1.0所以使用的为this.$dispatch();来触发事件，而在vue2.0版本中该方法已经弃用了，但是得特意说明一下dispatch可以用来处理兄弟间的通信，所以教程中的事件是可以触发成功的显示小球。

$dispatch() // 派发事件，沿着父链冒泡

broadcast 事件广播
@param {componentName} 组件名称
@param {eventName} 事件名
@param {params} 参数
遍历寻找所有子孙组件，假如子孙组件和componentName组件名称相同的话，则触发\$emit的事件方法，数据为 params.
如果没有找到 则使用递归的方式 继续查找孙组件，直到找到为止，否则继续递归查找，直到找到最后一个都没有找到为止。 

$broadcast() // 广播事件, 向下传递给所有的后代

 dispatch 查找所有父级，直到找到要找到的父组件，并在身上触发指定的事件。
 @param { componentName } 组件名称
 @param { eventName } 事件名
 @param { params } 参数

在官方vue2.0中

image.png
我们知道dispatch是基于组件树的事件流方式来通信的，通过使用事件中心实现组件的自由交流。
所以我们需要做以下的修改：

• 在各个用到触发自定义事件的组件中引入事件中心文件（src/assets/eventcenter.js）

import Vue from 'vue';
export default new Vue();

• 触发事件的代码变成
  eventcenter.$emit('cart-add',event.target);
• 在监听该事件的组件即goods组件中，在created函数钩子中添加
  dropball.$on('cart-add', this.cartAdd);

会发现小球就可以正常的显示了