在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的Theme和Theme Switcher使用小结
Sep 08 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 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中一个完整表单处理实现代码
2011/11/10 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
教师自我评价范例
2013/09/24 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
python爬取豆瓣电影TOP250数据
2021/05/23 Python