vue非父子组件的传值操作(中间件bus的使用)

非父子组件通信有两种vuex和bus.js
因为vuex杀鸡不用牛刀,下面咱讲下使用 bus.js 实现非父子组件通讯:
假设在工作中，有三个 .vue 文件：main.vue、Hello.vue、Hi.vue。main.vue 是主页面，Hello.vue 和 Hi.vue 类似于头部导航条和底部导航栏。现在Hi.vue 需要获取 Hello.vue 传递的信息。
操作步骤如下:

1.main.vue

2.配置路由

3.准备bus.js

4.传递信息的页面Hello

5.接收信息页面Hi.vue

实现效果:成功传递数据.

总结:Bus.js 实现非父子组件通信的原理是什么?

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