vue EventBus 事件总线 组件间通信

如何使用EventBus

1. 创建事件总线并导出utils - bus.js

import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;

2. 引入utils - bus.js，并应用

import bus from '@/utils/bus';

假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。

通过 Event Bus 进行组件间通信，来折叠侧边栏为例

3.发送事件 A=>B

this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);

4.接收事件 B接收A

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

5.消除事件

如果业务有反复操作的页面，EventBus 在监听的时候就会触发很多次，也是一个非常大的隐患。在vue页面销毁时，同时移除EventBus事件监听。

destroyed(){
   bus.$off('collapse');
},