中间件 eventbus的使用

中间件其实就是一个vue实例  但是无内容，只用于事件的中转

不受组件关系影响，用于组件之间通信

1、创建一个eventBus.js文件  文件内容为

import Vue from 'vue';

const bus = new Vue();

export default bus;

2、在相关页面引用eventBus

import bus from '../base/eventBus';

3、相关页面使用eventBus进行监听通信或发送通信

比如在a页面中给b页面发送通信

a页面进行发送

bus.$emit('collapse', '要发送的信息');

 b页面监听a页面发送的事件 接收相应信息

mounted() {
  bus.$on('collapse', msg => {
     this.collapse = msg;
   })
}

b页面关闭时需要对监听事件进行销毁

BeforeDestroy() {
   bus.$off('collapse');
}