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

站长资源 2024/11/28 佚名

2 0 1

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,事件广播接收,Vue,广播接收

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

vue2.0安装style/css loader的方法

vue项目国际化vue-i18n的安装使用教程

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接