在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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
javascript 获取网页参数系统
Jul 19 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Vue组件开发初探
Feb 14 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
javascript实现随机抽奖功能
Dec 30 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
模具专业推荐信
2013/10/30 职场文书
物业招聘计划书
2014/01/10 职场文书
银行介绍信范文
2014/01/10 职场文书
初中家长寄语
2014/04/02 职场文书
七年级作文之秋游
2019/10/21 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
python多线程方法详解
2022/01/18 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript