在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之十一 添加事件核心方法
Jul 31 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
javascript实现完美拖拽效果
May 06 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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获取url的函数代码
2011/08/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Prototype Number对象 学习
2009/07/19 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
聚美优品广告词改编
2014/03/14 职场文书