vue2.0 跨组件通信问题

Question

vue2.0 弃用了 $dispatch 和 $broadcast ，由于项目本身不复杂，所以不打算引入vuex，于是按照教程，建立一个空的Vue实例，来实现跨组件通信。
教程如图：

我将var bus = new Vue() 放在了main.js 中（不知道这样对不对），最终并未实现跨组件通信，反而在控制台中报错 “Uncaught ReferenceError: bus is not defined(…)”

想知道我的问题出在哪？

Answer 1

非父子组件通信，使用$on监听，使用$emit触发。但是组件是相互独立的，而使用$emit获得$on传递的参数的关键是2者必须拥有公共的实例。所以这里，我们需要单独新建一个公共实例文件：bus.js（名字随便取）。然后把bus实例分别传给需要通信的2个组件。最后，利用bus的实例实现组件通信：bus.$on传数据给bus.$emit。

我也是看官网例子没弄明白，自己捣鼓了1天才实现了组件通信，思路大概是这样。如有错误，希望大神们纠正。

Answer 2

新建 bus.js:

import Vue from 'vue'
export var bus = new Vue()

再在组件里面： import bus from 'bus.js'

Answer 3

可以使用node中的eventemitter，通过on绑定事件，emit发射事件，不受组件层级控制，这个是注册到全局的。

Answer 4

最近在看Vue2.0 也有和楼主同样的疑问 官网的例子太过简单看不懂 捣鼓了半天 有点一知半解 简单的说就是用一个新的Vue实例bus作为中央数据总线 为这个bus $on添加自定义事件，然后这个bus实例data数据 传递给兄弟组件 兄弟组件在内部方法里触发$emit触发bus的自定义事件 来完成所谓的兄弟组件通信。(但是发现只能通信对象和数组) 这是我做的一个简单的DEMO http://www.liubf.com/demo/Vue... 有错误之处还请大神们指正。

Answer 5

官方的例子应用场景仅局限在同一个模块中.
如果你用模块化编程,那么你在a模块中定义的bus,在b模块中是无法访问的.

解决方法有很多,直接弄一个全局bus的模块,那里需要就import下.或者更偷懒点,直接挂在vue的原型上,import都免去了

//Zeus(宙斯，全局发号施令，好霸气！)
Vue.prototype.Zeus = new Vue()

//在其他模块中使用
this.Zeus.$on('event_name', (data)=> {console.log(data)})

this.Zeus.$emit('event_name', 'send data')

当然这个方案也不完美。因为Vue的事件系统不支持晚绑定。所以我决定自己撸一个支持晚绑定的，然后挂在Vue原型上给自己用。 懒得折腾他的插件系统了。