vue2.0s中eventBus实现兄弟组件通信的示例代码


Posted in Javascript onOctober 25, 2017

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中,已经废除了这种用法。

vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择。

然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法。那么,eventBus的作用就体现出来了。

主要是现实途径是在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

这里来看一个简单的例子:

比如,我们这里有三个组件,main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件,而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现,click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来。

首先,我们给click组件添加点击事件

<div class="click" @click.stop.prevent="doClick($event)"></div>

 想要在doClick()方法中,实现对show组件的通信,我们需要新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js

import Vue from 'vue'; 
export default new Vue();

这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。

import Bus from 'common/js/bus.js';

接下来,我们在doClick方法中,来触发一个事件:

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

这里我们在click组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。

接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   }

这样,在每次click组件的点击事件中,就会把event.target传递到show中,并console出来。

所以eventBus的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
Sea.JS知识总结
May 05 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
js实现随机数小游戏
Jun 28 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 #Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
JavaScript 异步调用
Oct 25 #Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 #Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
用js遍历 table的脚本
2008/07/23 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
angularJS 入门基础
2015/02/09 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python中的默认参数实例分析
2018/01/29 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
对Python 数组的切片操作详解
2018/07/02 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python初学者常见错误详解
2019/07/02 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
通俗讲解python 装饰器
2020/09/07 Python
中学生自我鉴定
2014/02/04 职场文书
《白鹅》教学反思
2014/04/13 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书