在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脚本语言在网页中的简单应用
May 13 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
Node.js文件操作详解
2014/08/16 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python中的filter()函数的用法
2015/04/27 Python
Python实现抢购IPhone手机
2018/02/07 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
制衣厂各岗位职责
2013/12/02 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
安全大检查反思材料
2014/01/31 职场文书
学校后勤岗位职责
2014/02/19 职场文书
cf收人广告词
2014/03/14 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python