在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——表单应用范例
Feb 20 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
深入理解React高阶组件
Sep 28 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php简单实现快速排序的方法
2015/04/04 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js中有关IE版本检测
2012/01/04 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python中函数传参详解
2016/07/03 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
html5与css3小应用
2013/04/03 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
社区党务工作总结2015
2015/05/19 职场文书
中学教师读书笔记
2015/07/01 职场文书
美容院员工规章制度
2015/08/05 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
《窃读记》教学反思
2016/02/18 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python