vue.js2.0非父子 组件之间传参

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信. 
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

let Hub = new Vue(); //创建事件中心
1
1

组件1触发：

<div @click="eve"></div>methods: {    eve() {        Hub.$emit('change','hehe'); //Hub触发事件    }}
1
2
3
4
5
6
1
2
3
4
5
6

组件2接收:

<div></div>created() {    Hub.$on('change', () => { //Hub接收事件        this.msg = 'hehe';    });}
1
2
3
4
5
6
1
2
3
4
5
6

这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站！

参考官方文档：https://cn.vuejs.org/v2/guide/components.html#%E9%9D%9E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1

非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在复杂的情况下，我们应该考虑使用专门的状态管理模式。