Vue2.0 事件的广播与接收(观察者模式)
1.Vue1.0 事件的广播与接收(观察者模式)
早期vue1.0组件之间的这通信传递数据的方法,vue官网给出了两上方法 $dispatch 和 $broadcast。
但vue2.0之后就弃用 这两个方法,以下原因是vue官网给出来的
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(你的事件名字)来取消收听就可以啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue2.0 事件发射与接收
- Vue2.0 事件发射与接收
- 使用javascript模拟观察者模式和事件监听广播机制
- Vue2.0 事件发射与接收
- Vue2.0 事件发射与接收
- 详解Vue2.0 事件派发与接收
- 事件机制和观察者模式
- 【C#】Event事件的应用之观察者模式
- 委托、Lambda表达式、事件系列06,使用Action实现观察者模式,体验委托和事件的区别
- 观察者模式---C#中的事件
- 观察者模式-猫捉老鼠(委托与事件)
- 事件响应机制与观察者模式
- Android用观察者模式代替广播通知刷新界面
- C# 中的委托和事件 以及观察者模式
- 【设计模式】observer观察者模式:模拟java.awt.Button事件监听。
- vue2.0+基础知识连载(07)--- 事件对象
- 观察者模式(广播机制)
- 【GOF23设计模式】_观察者模式_广播机制_消息订阅_网络游戏对战原理_自带类与接口JAVA251-252
- android广播接收器 接收广播的Intent Action 事件类型
- 采用动态广播和观察者模式来分别实现验证码自动填写