在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下的几个你可能没用过的功能
Aug 29 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
js实现上传图片并显示图片名称
Dec 18 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
PHP5 安装方法
2006/10/09 PHP
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
Javascript 篱式条件判断
2008/08/22 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
jQuery实现简单日历效果
2020/07/05 jQuery
原生js实现下拉框选择组件
2021/01/20 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python异常处理总结
2014/08/15 Python
python抽象基类用法实例分析
2015/06/04 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Django 路由控制的实现代码
2018/11/08 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
管理心得体会
2013/12/28 职场文书
大四自我鉴定
2014/02/08 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
购房委托书范本
2014/09/18 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
消防演习通知
2015/04/25 职场文书