在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实现的listview效果
Apr 28 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
JS中常用的消息框总结
Feb 24 Javascript
angular 用Observable实现异步调用的方法
Dec 27 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php实现简单爬虫的开发
2016/03/28 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php实现微信发红包功能
2018/07/13 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
python 制作磁力搜索工具
2021/03/04 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
《春天来了》教学反思
2014/04/07 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
大学生十八大感想
2015/08/11 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js