vue bus全局事件中心简单Demo详解


Posted in Javascript onFebruary 26, 2018

1.vue-cli搭建好项目之后,使用npm安装vue-bus

 npm install vue-bus

2.在入口文件main.js中全局注册

import Vue from 'vue';
 import VueBus from 'vue-bus';
 Vue.use(VueBus);

3.传递数据:

this.$bus.emit("eventName",data)

4.接收数据:

this.$bus.on("eventName",data)

5.注意事项

this的作用域要指向当前的vm实例,on监听事件一般放在组件生命周期函数中的created或者mounted中,注销bus需要在beforeDestroy中;

关于bus事件触发多次的问题,一方面可能因为vue组件被复用,导致一个bus事件被重复注册,破坏了“同事件名”bus,发送与接收唯一对应的关系;

另一方面是页面路由的时候,原有页面中的bus事件并没有被注销,依然隐藏在程序中。

总结

以上所述是小编给大家介绍的vue bus全局事件中心简单Demo详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 #Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 #Javascript
使用vue-cli编写vue插件的方法
Feb 26 #Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 #Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 #Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 #Javascript
You might like
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
cakephp常见知识点汇总
2017/02/24 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python实现图像识别功能
2018/01/29 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python实现Flappy Bird源码
2018/12/24 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python使用递归的方式建立二叉树
2019/07/03 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
安全月宣传标语
2014/10/07 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
道歉信范文
2015/05/12 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
PyTorch的Debug指南
2021/05/07 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL