vue 事件总线EventBus介绍

1. eventbus 的简介

eventbus又称为事件总线, 在vue中可以使用eventbus来作为沟通桥梁的概念, 是所有组件所共有的事件中心.可以向该中心注册发送事件或接收事件.所以组件都可以上下平行地通知其他组件

2. 如何使用eventbus

(1) 初始化

首先需要创建事件总线并将其导出,以便其他模块可以使用或者监听它,有两种方式处理
第一种,新建一个js文件,比如event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

实际上eventbus是一个不具备dom的组件
另外一种方式,可以直接在项目中的main.js初始化EventBus:

// main.js
Vue.prototype.$EventBus = new Vue()
// 注意这种方式初始化的EventBus是一个全局事件总线, 

(2) 发送事件

假设有两个vue页面需要通信, A页面在按钮上面绑定了点击事件,发送一则消息,通知B页面

// A 页面
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; </script>

接下来在B页面接收消息

(3) 接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
}; </script>

前面提过,如果使用不善,eventBus会是一个灾难, vue是单页面应用,如果你再某一个页面刷新之后,与之相关的eventbus将会被移除, 这样会导致业务走不下去. 还有就是如果业务有反复操作的页面, eventBus在监听的时候就会触发很多次, 也是一个非常大的隐患. 这时候我们需要好好处理eventbus在项目中的关系, 通常是在vue页面销毁的时候,同事移除eventbus事件监听

移除事件监听

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

你可是要EventBus.$off('eqwe')移除应用内所有对此某个事件的监听, 或者直接调用EventBus.$off() 来移除所有事件频道.不添加任何参数~~~~

3. 全局eventbus

它的工作原理是发布/订阅方法, 通常称为pub/sub
创建全局EventBus

// 1. 创建bus.js文件   **src/service/bus.js**
const install = (Vue) => { 
    const Bus = new Vue({ 
        methods: { 
            on (event, ...args) { 
                this.$on(event, ...args); 
            }, 
            emit (event, callback) { 
                this.$emit(event, callback); 
            }, 
            off (event, callback) { 
                this.$off(event, callback); 
            } 
        } 
    }) 
    Vue.prototype.$bus = Bus; 
} 
export default install;

// **maix.js文件中引入**
import Bus from "@/service/bus"; 
Vue.use(Bus);


// **组件中使用**
this.$bus.on('Config_forms',(data)=>{ }) //绑定事件
this.$bus.emit('Config_forms',data) //触发该方法 this.$bus.off('Config_forms') //解绑事件