vue2.0 跨组件通信问题

rossroma
  • 188

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

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

想知道我的问题出在哪?

回复
阅读 6.5k
5 个回答

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

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

新建 bus.js:

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

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

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

乘风破浪
  • 1
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏