详解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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
javascript模块化简单解析
Apr 07 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
angular动态表单制作
Feb 23 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
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
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
jquery图片预览插件实现方法详解
2019/07/18 jQuery
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python3读取文件常用方法实例分析
2015/05/22 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python 常见的反爬虫策略
2020/09/27 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
电气专业应届生求职信
2013/11/01 职场文书
煤矿安全生产标语
2014/06/06 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
信用卡工作证明范本
2015/06/19 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
golang json数组拼接的实例
2021/04/28 Golang