相思资源网 Design By www.200059.com

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(你的事件名字)来取消收听就可以啦!

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

标签:
Vue2.0,事件广播接收,Vue,广播接收

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

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

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。