在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 ready函数源代码研究
Dec 06 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
javascript 操作符(~、&、|、^、)使用案例
Dec 31 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
搜索引擎技术核心揭密
2006/10/09 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
详解django三种文件下载方式
2018/04/06 Python
python绘制中国大陆人口热力图
2018/11/07 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python实现大文本文件分割
2019/07/22 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
python中reload重载实例用法
2020/12/15 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
益模软件Java笔试题
2012/03/27 面试题
电子信息科学专业自荐信
2014/01/30 职场文书
网络编辑职责
2014/03/01 职场文书
公司经理聘任书
2014/03/29 职场文书
企业法人授权委托书
2014/04/03 职场文书
公司联欢会策划方案
2014/05/19 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python