在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 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
微信小程序如何实现全局重新加载
Jun 05 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通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php实现网站留言板功能
2015/11/04 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript引导程序
2008/10/26 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python区分不同数据类型的方法
2019/10/14 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
档案信息化建设方案
2014/05/16 职场文书
新学期开学标语
2014/06/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
初中信息技术教学计划
2015/01/22 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
七年级作文之英语老师
2019/10/28 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle