vue2.0中eventBus实现兄弟组件通讯
我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是eventBus。
官网相关描述在:$dispatch和$broadcast替换 一节中。提到:
$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。对于$dispatch 和 $broadcast最简单的升级方式就是:通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的。组件中可以使用$emit,$on,$off分别来分发,监听,取消监听事件。但是对于复杂的情况,更推荐使用一个专门的状态管理层如:Vuex。
主要实现途径是在相互通讯的兄弟组件之中,都引入一个新的Vue实例,然后分别调用这个实例的事件触发和监听来实现通讯和参数传递。
简单的例子:
参考:https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
我这里说个比较简单的:
这里,A.vue是父组件,B.vue,C.vue是兄弟组件。在B中click后,C将点击的DOM打印出来。
给click添加事件:
<div class="click" @click.stop.prevent="doClick($event)"></div>
在公共方法common/js/bus.js里面:
import Vue from 'vue';
export default new Vue();
这里创建了一个新的Vue的实例,接下来在B和C组件里面引入Bus;
然后在B里面进行触发事件:
methods:{
addCars(ev){
Bus.$emit('getTarget',event.target);
}
}
在C组件里面的created()钩子中调用Bus监听这个事件,并接受参数:
created(){
Bus.$on('getTarget',target=>{
console.log(target);
})
}
题外话:vuex是怎么实现的?
参考:https://segmentfault.com/q/1010000007491994
vue2.0中eventBus实现兄弟组件通讯的更多相关文章
- vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- 使用EventBus实现兄弟组件之间的通信
使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- router-view在vue2.0中不显示,解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
随机推荐
- CF-595
题目传送门 A .Yet Another Dividing into Teams sol:原先是用比较复杂的方法来解的,后来学弟看了一眼,发现不是1就是2,当出现两个人水平相差为1就分成两组,1组全是 ...
- 《运筹学基础及应用》习题1.1(b),1.1(c),1.2(a)
用图解法求解下列线性规划问题,并指出问题具有惟一最优解,无穷多最优解,无界解还是无可行解. 习题1.1(b):$\max z=3x_1+2x_2$$$s.t\begin{cases} 2x_1+x_ ...
- 吴裕雄--天生自然python学习笔记:python文档操作表格处理
表格也是 Word 文件中常用的对象,下面讲解 Win32com 中常用的表格操作命令 . 新建表格的语法为: 在 Word 文件中新建一个表格并插入单元格内容 在 Word 文件中新建一个 3 行 ...
- pycharm里配置了项目虚拟环境,terminal打开并不是在虚拟环境下,如何解决
在pycharm里,点开下方的Terminal,此时默认目录为当前项目对应的根目录, 第一步:输入 cd venv\Scripts 进入Scripts目录 第二步:然后运行activate.b ...
- 十、RPC(远程过程调用)
相关概念 RPC,是Remote Procedure Call的简称,即远程过程调用.它是一种通过网络从远程计算机上请求服务,而不需要了解底层网络的技术.RPC的主要功用是让构建分布式计算更容易,在提 ...
- asp.net mvcview界面does not contain a definition
在cshtml使用linq操作数据集,自动补全是可以使用Select,但是一直提示System.Collection.GenericList' does not contain a definitio ...
- linux debain systemd 开机启动 nodejs 兼容原initd启动 forever 开机自启
布署环境为debian 7.5 布署到一台新机器,系统版本为debian 8.0 原启动项 /etc/init.d/mongo_service 开机居然无法自起 开机自启动不能用了,看页面输出就发觉不 ...
- 不疯“模”不成活,海尔阿里II代电视将极致进行到底
我去过很多现场,经历过很多新品发布,各种概念,各种颠覆,有点见怪不怪.这次受邀海尔阿里II代电视发布会,本也是带着一颗平常心. 2点30分发布会准时开场,当 "智慧模块"在讲解员手 ...
- oracle12c 可行的解决办法:ORA-01017: invalid username/password; logon denied
开启服务OracleServiceORCL和OracleOraDB12Home1TNSListener用Oracle SQL developer 连接测试报错:ORA-01017: invalid u ...
- hql错误:No data type for node: org.hibernate.hql.ast.tree.IdentNode
今天写了一个查询,用的是hql,数据库是mysql.多表联查,结果报错了报: \-[IDENT] IdentNode: 'routerNumber' {originalText=routerNumbe ...