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') //解绑事件