Vue通信之兄弟通信(eventBus)

文章目录

1. 1. 1.创建eventBus
2. 2. 2.挂载全局
3. 3. 3.使用
   1. 3.0.1. 3.1注册/接受事件
   2. 3.0.2. 3.2派发/发送
   3. 3.0.3. 3.3解绑

使用 eventBus 事件总线，当触发事件时，发送一个通知出去，在需要响应的地方接收这个通知，响应事件.

1.创建eventBus

//新建一个 js 文件，写下如下代码就创建好了一个 eventbus，没错，就是这么简单

import Vue from 'vue'

export default new Vue;

2.挂载全局

在 main.js 中导入 eventbus ，然后将它挂载到 vue 的原型上，这样就可以全局调用了

import bus from './utils/eventBus'

Vue.prototype.bus = bus;

3.使用

3.1注册/接受事件

this.bus.$on('BUS_TEST',($msg) => {
       console.log($msg);
     })

用法: bus.$on(string类型的事件名,响应事件(回调函数))
个人习惯将事件名全部大写,不要为什么,非要回答,个人代码规范.

3.2派发/发送

this.bus.$emit('BUS_TEST','bus通信测试');

用法: bus.$emit(string类型的事件名,消息)
这样就实现了通信.

3.3解绑

this.bus.$off('BUS_TEST');

在哪注册的就要在对应的组件中解绑掉,否者事件会重复触发,内存也会变大.

一般在组件的beforeDestroy ,或 destroy生命周期中执行注销方法，手动注销事件。