Vue学习笔记-全局事件总线

全局事件总线(GlobalEventBus)

1. 一种支持所有组件间的通信方式（原理：相当于提供一个全局对象，这个对象能够被任意组件访问到，并且这个对象能够调用Vue内置函数）

2. 安装全局事件总线

   new Vue({
       el:'#app',
       render: h=>h(App),
       beforeCreate() {
           //将Vue实例对象放在Vue原型对象上的X属性中,即，安装全局事件总线
           Vue.prototype.$bus = this;
       }
   })
   1
   2
   3
   4
   5
   6
   7
   8

3. 使用事件总线
   3.1 数据接收方:需要绑定自定义事件,在组件即将销毁的时候，解除对应的事件绑定

   export default {
     //组件名
     name: "XXX",
     data(){
       return {
         ...
       }
     },
     methods:{
     	//这里用于接收数据的方法自己随意命名
     	dataReceive(data){
     		console.log(data)
     	}
     }
     mounted() {
       //在总线上绑定事件
       this.$bus.$on('yourEventName',this.dataReceive);
       /*
       写法2：$on方法的第二个参数一定要写成箭头函数的形式
       this.$bus.$on('yourEventName',(data)=>{
       	...
       });
   	*/
     },
     beforeDestroy() {
       //在组件即将销毁的时候，解除对应的事件绑定
       this.$bus.$off('yourEventName');
     }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28

   3.2 数据发送方: 需要在触发数据发送的方法中提供如下代码:
   this.$bus.$emit('yourEventName',data)

4. 最好在 beforeDestory( )钩子中使用$off方法解除自定义事件的绑定