vue非父子组件通信(EventBus)

之前在使用vue开发后台管理系统时，头部按钮点击，左侧菜单导航展开和收缩的功能，由于菜单导航和头部是两个组件，所以这个时候就涉及到非父子组件通信。

有必要思考两个问题：

1. Vue 中非父子组件通信的方法有哪些

答：常用的方法有 EventBus 和 Vuex(Vuex暂不说明，两者使用场景都可以查看官方文档)。

2. EventBus 实现非父子组件通信的原理是什么

答：通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )。

PS: 共用同一个Vue的实例( new Vue() )，通过此实例进行事件传递参数，在其他组件中监听此事件并且接收参数实现通信。

例子（非上面的导航菜单功能）:

bus.js （实例化一个Vue对象）

/**
 * 使用 EventBus
*/
import Vue from 'vue'

const bus = new Vue()

export default bus

组件Hello.vue

组件World.vue

组件Home.vue （同时引入Hello.vue组件和World.vue组件）

效果图展示：

传递参数前：

image.png

传递参数后：

image.png