在Uni中使用Vue的EventBus总线机制操作


Posted in Javascript onJuly 31, 2020

首先我们要使用的EventBus事件总线,能够做到兄弟组件,或者不是父子关系的页面达到数据相互传递的效果

一种做法是在main.js中创建事件总线

在Uni中使用Vue的EventBus总线机制操作

创建完$EventBus后,就可以直接在页面中使用事件总线的方法来发送和接收事件了

第二种做法:封装事件总线

在Uni中使用Vue的EventBus总线机制操作

在Uni中使用Vue的EventBus总线机制操作

使用的时候直接引入就可以了

在Uni中使用Vue的EventBus总线机制操作

补充知识:vue里使用EventBus解决兄弟组件间的传递信息

①初始化

import Vue from 'vue'

export const EventBus = new Vue();

②在需要的调用其他组件的页面:

EventBus.$emit ( '自定义函数', 传参 );

③被调用的页面:

EventBus.$on ( '自定义函数', (接收参数) => {   
 执行你需要执行方法
}

④总结

EventBus的使用场景像是一种广播,当我们向EventBus发送一个事件,则该事件将会传递给多个该事件的订阅者。

1.解耦合(轻松的实现系统间解耦)

2.高性能可扩展(每一个事件都是简单独立且不可更改的对象,只需要保存新增的事件,不涉及其他的变更删除操作)

3.系统审计(每一个事件都是不可变更的,每一个事件都是可追溯的)

以上这篇在Uni中使用Vue的EventBus总线机制操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
Vue之封装公用变量以及实现方式
Jul 31 #Javascript
three.js 将图片马赛克化的示例代码
Jul 31 #Javascript
three.js 如何制作魔方
Jul 31 #Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 #Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 #Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 #Javascript
You might like
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
毕业生自荐信格式
2014/03/07 职场文书
安全标语大全
2014/06/10 职场文书
会计电算化专业求职信
2014/06/10 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
烈士陵园观后感
2015/06/08 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
2016党校培训心得体会
2016/01/07 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python