Vue2.0 事件的广播与接收(观察者模式)


Posted in Javascript onMarch 14, 2018

1.Vue1.0 事件的广播与接收(观察者模式)

早期vue1.0组件之间的这通信传递数据的方法,vue官网给出了两上方法 $dispatch 和 $broadcast。

但vue2.0之后就弃用 这两个方法,以下原因是vue官网给出来的

Vue2.0 事件的广播与接收(观察者模式)

官方文档

2.Vue2.0 事件的广播与接收(观察者模式)

vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

请直接看代码,在初始化的时候,在全局App.vue文件中给data添加一个 名字为eventhub 的空vue对象:

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

这样我们就可以在任何组件都可以调用事件发射接收的方法了.那么在组件是如何发射与接收的呢?请看正面代码 :

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

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)

以上就是一个组件发射了一个事件 ,可以理解成我发送了一个广播,如果其它组件有需要我的广播,那么请调整到我的频道,这个频道就是你的事件名字,而广播的内容就是你传送的数据,那么问题了,其它组件是用什么方法来接收呢?请看代码

this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{
  handle(yourData)
} )

需要收听广播的组件可以通过我们全局定义的eventHub.$on来接收,接收频道就是广播的事件名字,回调里面有数就是广播内容。

3.更加简洁的写好

对js有一定的了解,可能知道js有一个prototype的东西,这个主要的给js对象增加额外的属性。

比如 声明一个对象

var person=function(){
  this.name="小明";
}

然后我们扩展一下这个对象,比如增加一个讲话的方法,这时prototype这个好用的东西就派上用场了

person.prototype.say=function(){
  alert(this.name);
}

这样就扩展了原来的函数对象了

调用的时候直接

var a=new person();

person.say();就会弹出小明来了。这么做的好处是不会额外产生内存,所有实例化后的对象都会从原型上继承这个方法。

Vue其实就是js一个类库,当然也可以用prototype这个神奇的东西来拓展自定义的属性了,看招:

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

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

这样我们在组件内部 就可以直接调用$eventHub

以下是对上面的方法重新 改造:

发布者

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)

接收者

this.$eventHub.$on('你的事件名字', (传送)=>{
    handle(yourData).
  } )

4.关闭广播

关闭广播我们主要通过 $off(你的事件名字)来取消收听就可以啦!

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

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
JS实现520 表白简单代码
May 21 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 #Javascript
Vue使用mixins实现压缩图片代码
Mar 14 #Javascript
vue2.0模拟锚点的实例
Mar 14 #Javascript
vue的mixins属性详解
Mar 14 #Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 #Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 #Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 #Javascript
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
python @property的用法及含义全面解析
2018/02/01 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
初中中等生评语
2014/12/29 职场文书
高校教师个人总结
2015/02/10 职场文书
小学班主任自我评价
2015/03/11 职场文书
班主任开场白
2015/06/01 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript