在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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
网页自动跳转代码收集
Sep 27 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
Vue分页组件实例代码
Apr 17 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
js实现贪吃蛇小游戏
Oct 29 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php之curl设置超时实例
2014/11/03 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
Python yield 使用浅析
2015/05/28 Python
解决Python requests 报错方法集锦
2017/03/19 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python复制文件到指定目录的实例
2018/04/27 Python
flask中的wtforms使用方法
2018/07/21 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python语言进阶知识点总结
2019/05/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
什么是会话Bean
2015/05/14 面试题
财务会计人员岗位职责
2013/11/30 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
爱护环境建议书
2015/09/14 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android