vue2.0 跨组件通信问题

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

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

想知道我的问题出在哪?

回答:

非父子组件通信,使用$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发射事件,不受组件层级控制,这个是注册到全局的。

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注