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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
JS ES6异步解决方案
Apr 29 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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+SQLite存储方案
2010/09/04 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python模块WSGI使用详解
2018/02/02 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python实现自动解数独小程序
2019/01/21 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3 简写animation
2012/05/10 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
数控个人求职信范文
2014/02/03 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
铁路安全反思材料
2014/12/24 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL