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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
jQuery的三种$()
Dec 30 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
解决vue addRoutes不生效问题
Aug 04 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
JavaScript如何判断对象有某属性
2020/07/03 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python下singleton模式的实现方法
2014/07/16 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python如何快速实现分布式任务
2017/07/06 Python
python实现对输入的密文加密
2019/03/20 Python
Python数据库小程序源代码
2019/09/15 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
祖国在我心中的演讲稿
2014/05/04 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Golang 遍历二叉树
2022/04/19 Golang