微信订阅号：Rabbit_svip
本节所需的基础知识：
任意组件相互通信或者说兄弟（平级）组件相互通信有2个解决方案。
【方案 1】通过父组件进行通信 （不推荐）
思路如下图所示
微信订阅号：Rabbit_svip
这种方法不推荐使用
因为如果组件的关系结构更复杂的话，用这种方式来传参将会变得十分麻烦。所以这里不会讲解这种做法（如果懂组件的父子通信的话，完全可以根据这个思路写出这种通信方式。）。
【方法 2】总线通信（五星推荐）
微信订阅号：Rabbit_svip
1、首先在公共区域建立一条总线，用来接收所有组件传过来的参数。
2、把参数传给其他有需要的组件。
这种方法可以避免【方法 1】因为组件层级关系复杂而导致传参麻烦的问题。
具体做法如下所示：
<!-- HTML代码 -->
<div id="app">
<lecturer></lecturer>
<audience></audience>
</div>
/* javascript代码 */
// 设置总线，一个外部的调度器var Event = new Vue();// 新建一个组件（产生数据的组件）Vue.component('lecturer', { // 设置组件模板
template: `
<div>
演讲者：<input @keyup="recite" v-model="poem"> </div>`,
data: function () {
return {
poem: ''
}
},
methods: {
recite: function() {
// 通过 $emit 定义一个名字，把值保存到这个空间里 。
Event.$emit('poem-details', this.poem);
}
}
})
// 新建一个组件（接收数据的组件）
Vue.component('audience', {
template: ` <div>
观众听到：{{lecturer_said}} </div>`,
data: function() {
return {
lecturer_said: ''
}
},
// mounted是一个钩子函数，在该组件挂载时执行
mounted: function() {
var that = this;
// 通过 $on 进行监听，poem-details 是被监听的对象。
Event.$on('poem-details', function(data) {
that.lecturer_said = data
})
}
})
new Vue({
el: '#app'
})
1、在所有组件最上面，设置一条总线，也可以说是一个外部的调度器。
var Event = new Vue();
2、在 lecturer 组件中，定义一个事件，通过该事件触发Event.emit( ‘参数 1’， ‘参数2’ );
参数1：定义一个名字
参数2：需要传过来的值（可以是一个数组或对象）
3、在 audience 组件中，通过钩子函数（mounted）在组件挂载时调用 Event.$on 监听 lecturer 组件传过来的东西。然后通过一个函数修改 audience 的数据。
