vue 组件通过bus通讯疑问

Question

1.问题

• 是否非父子非兄弟关系的组件不能通过bus通讯？请各位大佬赐教解疑

• 这个问题的 目的是更深入理解bus 的过程产生的，请 不要说用vuex

2.代码思路

• 在路由中注册a组件,b组件

• 在bus.js创建空的 Vue 实例作为事件总线

• 访问a组件的页面: /aaa。然后点击按钮，通过bus派发事件

• 在b组件中监听bus的自定义事件。但在a组件中派发事件后再访问b组件，b组件的监听函数未执行

如没能看懂，拜托复制相关代码在本地跑下

3.相关代码（基于vue-cli）

组件a

组件b

bus.js

import Vue from 'vue';

export default new Vue()

路由

const aaa = () => import('@/components/zujian/bus/a')

const bbb = () => import('@/components/zujian/bus/b')

export default new Router({

  routes: [{

      path: '/aaa',

      component: aaa

    },

    {

      path: '/bbb',

      component: bbb

    }]

})

Answer 1

其实了解一下底层原理就明白了，实际上就是运用了Vue内部的事件机制，可以参考Vue事件机制。emit做的事情就是从事件队列中找到对应的事件并执行，找不到则会丢弃，所以需要保证在此之前已经用on注册了事件。题主这段代码组件B中的on还没执行过就已经调用了组件A的emit了。

Answer 2

eventbus可以实现 非父子关系的组件之间的通信. 前提是两个组件都已经调用过mouted钩子.也就是a / b页面都进入(渲染)过.