详解Vue2.0 事件派发与接收


Posted in Javascript onSeptember 05, 2017

由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  eventHub: new Vue()
 }
})

好的 这个时候 你就可以一劳永逸了,在任何组件都可以调用事件发射 接受的方法了.

如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个

某一个组件内调用事件触发

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法

this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
  handle(yourData)
} )

遇到一个问题 ,考虑特定场景:

跳转路由之前我们调用了$emit方法,这个方法在A组件里面处理数据,但是A组件绑定$on事件之前 $emit事件已经发射,所以这会导致一直接受不到消息,看来这个事件绑定有时效性问题,你可以setTimeout来做一下延时,但是这个特别奇怪,那就把数据存到store然后等A组件加载完了再去取。。。。

在初始化Web app 之前 加上这样一句:

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

当然我们可以定义其他的全局变量.比如当前app的系统配置文件,名字为sysconfig.json,你可以这样定义

Vue.prototype.$config =Vue.prototype.$config||require('path/sysconfig.json')

这样我们在组件内部 就可以直接调用$eventHub 和 $config对象了。

比如 在mounted函数里面直接 console.log($config.yourKey)

record on 1.1.2017

刚才看到了webpack的插件里面有一个definePlugin 它可以帮我们定义全局的常量。

如何使用,很简单但是更好,我们不用去修改Vue对象:

new webpack.DefinePlugin({
 CONFIG: require('path/sysconfig.json')
});

然后我们也可以在全局内使用CONFIG对象了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
分页栏的web标准实现
Nov 01 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
js实现网页抽奖实例
Aug 05 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 #Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 #Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 #Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 #Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 #Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
You might like
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
详细介绍Python中的偏函数
2015/04/27 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python三大神器之fabric使用教程
2019/06/10 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
在校实习生求职信
2014/06/18 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
mysql查看表结构的三种方法总结
2022/07/07 MySQL