window.eventBus 在Vue中的使用方法（二）定义全局事件——$emit之触发事件传参 & $on-接收事件参数 & $off-移除事件

window.eventBus 在Vue中的使用方法（二）定义全局事件——$emit之触发事件/传参 & $on-接收事件/参数 & $off-移除事件

1、Vue中如何使用EventBus

1.1、初始化时全局定义

src/main.js

import Vue from 'vue'
 
// main.js 中
 
// 第一种定义方式
Vue.prototype.$eventBus = new Vue()
 
 
// 第二种定义方式
window.eventBus = new Vue();
1
2
3
4
5
6
7
8
9
10

1.2、触发事件-$emit

A组件

methods:{
    confirm(){
        this.$message.success('修改成功!')
       //使用方式一定义时
        // params 多个参数  // A组件触发
        this.$eventBus.$emit('eventName', param1,param2,...)

        //使用方式二定义时
        eventBus.$emit('eventName', param1,param2,...)   
        // window.eventBus.$emit('setInfo')
        //  window.eventBus.$emit('setInfo','小明')
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.3、监听事件/接收事件-$on

B组件

  mounted() {  // created(){}中也可 
    //使用方式一定义时  // B组件监听 注意，在触发之前B组件这一定要先加载出来
    this.$eventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行 逻辑代码
        // params 多个参数
    })

    //使用方式二定义时
    eventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行 逻辑代码
    })  
      
    // this.getTableData()    
    // window.eventBus.$on('setInfo', ()=>{
    //   this.getTableData()  //被触发事件
    // })
      
    // window.eventBus.$on('setInfo', (name)=>{
    //   console.log('接收参数',name)  //被触发事件  显示 小明
    // })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.4、移除事件-$off

在开发的过程中，我们要及时移除不使用的 eventBus ，原因：

① 为了避免在监听时，事件被反复触发

② 由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听

③ 未及时移除的 eventBus 会导致内存泄漏

methods:{
    finish(){
//使用移除
//为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。  
 this.$EventBus.$off('eventName', (param1,param2,...)=>{
    // 需要执行的代码
 }
        
        
      //使用方式一定义时
      this.$eventBus.$off('eventName');
      //使用方式二定义时
      eventBus.$off('eventName');               
        
      const res = response.data;
      if (Number(res.code) !== 2000 && Number(res.code) !== 0) {
        Message({
          message: res.msg || res.message,
          type: 'error',
          duration: 3000
        })
      }
      // window.eventBus.$off('setInfo')
      return response.data;        
    }
}
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

2、EventBus的原理是什么？

用 class 来实现我们自己的 EventBus：

class MyEventBus {
    constructor() {
        // 存储所有事件对应的回调的对应关系
        /**
         * key : [ callback, callback ]
         */
        this.items = {};
    }
 
    // 监听
    $on(eventName, callback) {
        if (!this.items[eventName]) {
            //一个事件可能有多个监听者
            this.items[eventName] = [];
        }
        this.items[eventName].push(callback)
        // 简化版写法 等同于上面
        // (this.items[eventName] ||= []).push(callback)
    }
 
    // 触发监听
    $emit(eventName, ...args) {
        if (!this.items[eventName]) return;
        this.items[eventName].forEach(ca => ca(...args))
    }
 
    // 去掉监听
    $off(eventName) {
        this.items[eventName] = []
    }
}
 
export default new MyEventBus();
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
29
30
31
32
33