在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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
帅气的琦玉老师
2020/03/02 日漫
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php之XML转数组函数的详解
2013/06/07 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python Flask实现restful api service
2017/12/04 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
毕业生自荐信
2013/12/14 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
志愿者活动总结范文
2014/04/26 职场文书
广告宣传策划方案
2014/05/21 职场文书
电工实训报告总结
2014/11/05 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
MySQL8.0的WITH查询详情
2021/08/30 MySQL