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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
人族 TERRAN 概述
2020/03/14 星际争霸
MYSQL环境变量设置方法
2007/01/15 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
自荐信的格式
2014/03/10 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
小学语文业务学习材料
2014/06/02 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
学习党史心得体会2016
2016/01/23 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电