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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
用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 curl 伪造IP来源的实例代码
2012/11/01 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
python文件操作整理汇总
2014/10/21 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python中pip的安装与使用教程
2018/08/10 Python
python微信好友数据分析详解
2018/11/19 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python高级property属性用法实例分析
2019/11/19 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
python源文件的字符编码知识点详解
2021/03/04 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
家长会欢迎标语
2014/06/24 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014年收银工作总结
2014/11/13 职场文书
在职证明格式样本
2015/06/15 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
nginx 配置缓存
2022/05/11 Servers