vue 之 中央事件总线 bus

在开发一些功能联动比较强的项目时，会涉及到很多的跨级和兄弟组件通信问题，这时候就会用到中央事件总线bus这个概念。我们这里将bus分装为一个vue插件使用。

一、定义bus文件

import Vue from 'vue'
const Bus = new Vue()
export default Bus

二、使用

1. 发送消息

// 引入bus文件
import bus from '@/bus'
// 发送消息  第一个参数为消息名（事件名），第二个参数为通信的值（可以不穿）
bus.$emit('msg', 'bus event');

2. 接收消息

// 引入bus文件
import bus from '@/bus'
// 接收消息  第一个参数为消息名（事件名），第二个参数中的`data`为通信的值
bus.$on('msg', (data) => {
    console.log(data)
})

*** 也可以将bus挂载到全局使用,在main.js中添加以下代码

import Bus from './bus'
Vue.prototype.$bus = Bus

使用时直接调用就可以了，this.$bus.$emit()，this.$bus.$on()。

无论风暴将我带到什么样的岸边，我都将以主人的身份上岸。