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 相关文章推荐
JS跨域总结
Aug 30 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python正则表达式面试题解答
2020/04/28 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python 3.8 新功能全解
2019/07/25 Python
pytorch 修改预训练model实例
2020/01/18 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
考试违纪检讨书
2014/02/02 职场文书
销售人员获奖感言
2014/02/05 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
关于运动会的广播稿
2015/08/19 职场文书