Vue.js2.0同级组件通讯

近期自己入门Vue2.0，使用其仿了个饿了么APP，在做购物车动画时，需要在同级组件之间传递参数，看了Vue官方文档和一些相关资料，大致总结了三种方法。

一、单独创建一个事件传递中心组件

1.单独创建一个js文件命为EventHandler.js，并创建一个空的Vue对象作为事件传递中心，文件内容如下：

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

2.传递者组件：

<script type="text/ecmascript-6">
import EventHandler from '../../common/js/EventHandler';
export default {
methods: {
    addCart(event) {
        EventHandler.$emit('add-cart', parameter);
    }
}
</script>

3.接收者组件：

<script type="text/ecmascript-6">
import EventHandler from '../../common/js/EventHandler';
export default {
created() {
    EventHandler.$on('add-cart', (parameter) => {
        this.drop(parameter);
    });
},
methods: {
    drop(parameter) {
        console.log(parameter);
    }
},
</script>    

二、在组件初始化时，创建一个空组件

1.在main.js创建的Vue实例时加入一个空对象，例：

let app = new Vue({
  router: router,
  render: h => h(App),
  // 定义一个空对象，在任何组件都可以调用事件发射，接收的方法
  data: {
    eventHub: new Vue()
  }
}).$mount('#app');

2.传递者组件：

<script type="text/ecmascript-6">
export default {
methods: {
    addCart(event) {
        this.$root.eventHub.$emit('add-cart', parameter);
    }
}
</script>

3.接收者组件：

<script type="text/ecmascript-6">
export default {
created() {
    this.$root.eventHub.$on('add-cart', (parameter) => {
        this.drop(target);
    });
},
methods: {
    drop(parameter) {
        console.log(parameter);
    }
},
</script>

三、Vuex

详细见Vuex官网