vue事件总线（Event Bus）

bus总线

使用背景

数据展示项目中，侧边菜单栏有一个展开收缩的功能，这会导致右侧的宽度会发生变化，但是图表并没有根据宽度的变化自适应。于是想到根据菜单栏的伸缩状态去手动resize图表，这个状态需要在非兄弟组件之间传递，于是用了vue中的Event Bus.

Event Bus使用方法

1.Event Bus的初始化
Event Bus的创建方式有两种，

一种是创建一个.js文件：

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

另一种是直接在main.js中初始化

Vue.prototype.$EventBus = new Vue()

2.发送事件
在点击菜单栏伸缩按钮的组件中的传递一个collpase事件，并且传递一个状态（这里以.js的方式实现）
import bus from ‘…/common/bus’;

// 侧边栏折叠
      collapseChage() {
        this.collapse = !this.collapse;
        bus.$emit('collapse', this.collapse);
      }

3.监听事件
在需要根据菜单收缩做自适应图表的组建中监听这个事件

bus.$on('collapse', msg => {
          setTimeout(function () {
            _this.chart1.resize()
            _this.chart2.resize()
          },500)
      })

4.移除事件监听者
如果需要移除对某个事件的监听，可以这样写：

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

你也可以使用 EventBus.$off(‘collapse’)来移除应用内所有对此事件的监听。或者直接调用EventBus.$off() 来移除所有事件频道， 注意不需要添加任何参数 。