在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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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调用c接口无错版介绍
2014/03/11 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python 实现try重新执行
2019/12/21 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
逻辑链路控制协议
2016/10/01 面试题
客服专员岗位职责范本
2013/11/29 职场文书
软件项目实施计划书
2014/05/02 职场文书
国庆宣传标语
2014/06/30 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
服装店员工管理制度
2015/08/07 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL