Vue-全局事件总线

一、全局事件总线概述

1.定义

    全局事件总线是一种组件间的通信方式，可以进行任意组件间进行通信，大大方便了组件间的数据传递

2.原理图

    如上图所示，例如B要给A传递信息，他们之间是兄弟节点，不能直接传递信息，要借助一个中介来传递，这时就假如有一个x可以充当它们的桥梁

    如果B要给A传递信息，那么A可以给x绑定一个自定义事件，让x自身携带上这个事件，等别人触发的时候就会通过留在A中的事件回调接收到数据，这时B要给A传数据，就可以通过触发x身上的A给x绑定的自定义事件去给A传递数据

总之：

1. 谁接收数据，谁就给x绑定事件，并且自身含有事件回调函数
2. 谁发送数据，谁就触发事件

3.桥梁x（全局事件总线）需要满足的条件

    从上面的原理图我们知道，给x绑定事件通过$.on,触发事件通过$.emit，此外还有解绑事件$.off，这就要求x身上具有这些东西，并且得让每一个组件都能看到它，才能充当好任意组件通信桥梁的作用

1. 具有$on，$emit，$off等
2. 每一个组件都能看到它

    条件第二条：全局事件总线一定要让vc或者vm访问得到，结合之前学过的组件间的内置关系，vc可以访问到Vue原型上的属性和方法，vm毋庸置疑的也可以，所以Vue原型可以让vc和vm都访问到

 VueComponent.prototype.proto === Vue.prototype

     第一条：$on，$emit，$off这三个方法也在Vue原型对象上，所以，我们的全局事件总线就要放在Vue的原型对象（vue.prototype）上，以确保每个组件都能访问得到

二、安装全局事件总线

new Vue({

      .....

      beforeCreate(){

         Vue.prototype.$bus = this    //安装全局事件总线，this就是当前应用的vm

      }

    })

三、使用全局事件总线

 1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

      <!-- 接收数据 -->

      methods(){

         demo(data){...}

      }

      <!-- 绑定事件 -->

      mounted(){

         this.$bus.$on('xxx',this.demo)

      }

  2.提供数据：谁发送数据谁触发‘xxx’事件

        this.$bus.$emit('xxx',数据)

注意 ：最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件，以免全局事件总线负载过大

四、举例 

    假如有两个student和school组件，刚开始解析后如下图所示：

    这时要school组件(上方的)给student组件(下方的）传递信息

1.安装全局事件总线，找到main.js

2.绑定事件

    student要接收数据，所以就在在student组件中给$bus(全局事件总线),绑定自定义事件，写下接收数据的事件回调，并将接收到的数据赋值给schoolName，通过模板语法显示到页面上

    记得在组件销毁之前解绑全局事件总线上的自定义事件，一定要传递参数，如不传参数，默认销毁全局事件总线上所有的自定义事件

    传递的参数为当前组件给全局事件总线绑定的事件名

3.触发自定义事件

    在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）

4.最终效果(点击按钮触发全局事件总线)

四、总结 

     全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐

1.父传子：props

2.子传父：

1. props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）
2. 自定义事件（通过v-on,ref给子组件绑定自定义事件）
3. 给子组件添加ref属性，父组件可以通过获得子组件的组件实例来操作子组件中的数据

3.兄弟组件或者爷孙组件：事件总线