作用

1. 全局事件总线，听上去很复杂，操作起来很有意思。它实际工作是进行任意组件间通信的。
2. 在此之前我们用 vc 的 props 配置项和组件自定义事件实现了父子组件通信，一些需求中需要让兄弟组件间进行通信，这是我们就用到了全局事件总线。

使用说明

1. 安装全局事件总线。
2. 发送数据方：通过事件总线发射事件并传参。.$emit(事件名,数据)
3. 接收数据方：通过事件总线注册发送数据方发射的事件并接参。.$on(事件名,回调函数)
4. 接收数据方使用完数据后，解绑发送数据方发射的事件。.$off(事件名)

注：下面例子会以学生组件向学校组件发射数据为例。

安装全局事件总线

1. 这里只需要在 /src/main.js 文件，new Vue 实例 beforeCreate() 生命周期 中设置全局事件总线即可。

2. main.js

   new Vue({
     render: h => h(App),
     beforeCreate() {
       Vue.prototype.$bus = this; // 安装全局事件总线
     }
   }).$mount('#app')

3. 这里我们定义的全局事件总线名称为 $bus 这里可以自定义，只是后期使用时注意即可。

发送数据方 · 学生组件

1. 下面代码会通过学生组件的按钮点击事件，发送数据。

2. Student.vue

   <template>
       <div class="box back">
           <h5>学生姓名：{{name}}</h5>
           <h5>学生性别：{{sex}}</h5>
           <h5>学生年龄：{{age}}</h5>
           <button @click="sendData">发射数据</button>
       </div>
   </template>
   
   <script>
   export default {
       name: 'Student',
       data(){
           return {
               name: 'SevenOne',
               sex: '男',
               age: 21,
           }
       },
       methods: {
           sendData(){
               this.$bus.$emit('getStudentData',this.name)
           }
       },
   }
   </script>

3. 代码第 22 行，通过 .$emit(事件名,数据) 向外发射事件，并发送数据。

接收数据方 · 学校组件

1. 接收数据是在组件的 mounted() 生命周期 内完成的。

2. School.vue

   <template>
       <div class="box back">
           <h5>学校名称：{{name}}</h5>
           <h5>学校地址：{{address}}</h5>
       </div>
   </template>
   
   <script>
   export default {
       name: 'School',
       data(){
           return {
               name: '内蒙古农业大学',
               address: '内蒙古呼和浩特'
           }
       },
       mounted() {
           this.$bus.$on('getStudentData',(data) => {
               console.log('我是 School 组件，我接受到了数据：',data);
           })
       },
   }
   </script>

3. 代码 18 ～ 20 行通过 .$on(事件名,回调函数) 通过事件总线注册学生组件发射的事件并接收数据。

4. 值得注意的是，在第 18 行我们通过箭头函数来处理事件回调，用箭头函数的好处是，这里的 this 不会指错，仍是 School 组件的实例对象。除了用箭头函数外，还可以提前在 methods 中配置好，然后回调函数直接写 methods 中配置的函数名即可。

   <script>
   export default {
       name: 'School',
       data(){
           return {
               name: '内蒙古农业大学',
               address: '内蒙古呼和浩特'
           }
       },
       methods: {
           getStudentData(data){
               console.log('我是 School 组件，我接受到了数据：',data);
           }
       },
       mounted() {
           this.$bus.$on('getStudentData',this.getStudentData);
       },
   }
   </script>

解绑事件

1. 通常会在接收数据组件的 beforeDestroy() 生命周期 中解绑事件。

2. School.vue

   <script>
   export default {
       name: 'School',
       data(){
           return {
               name: '内蒙古农业大学',
               address: '内蒙古呼和浩特'
           }
       },
       mounted() {
           this.$bus.$on('getStudentData',(data) => {
               console.log('我是 School 组件，我接受到了数据：',data);
           })
       },
       beforeDestroy() {
           this.$bus.$off('getStudentData');
       },
   }
   </script>