在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 相关文章推荐
Node.js文件操作详解
Aug 16 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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生成不重复标识符的方法
2014/11/21 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
jQuery.extend 函数及用法详细
2015/09/06 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python计算回文数的方法
2015/03/11 Python
python调用百度REST API实现语音识别
2018/08/30 Python
用Django写天气预报查询网站
2018/10/21 Python
Django 多环境配置详解
2019/05/14 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
事业单位个人应聘自荐信
2013/09/21 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
数学国培研修感言
2014/02/13 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
简历里的自我评价范文
2014/02/24 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
小学班主任事迹材料
2014/12/17 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
教你用python实现12306余票查询
2021/06/30 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
阿里云日志过滤器配置日志服务
2022/04/09 Servers
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL