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对象： h(App),data: {
eventHub: new Vue()
}
})
这样我们就可以在任何组件都可以调用事件发射接收的方法了.那么在组件是如何发射与接收的呢？请看正面代码 ： 某一个组件内调用事件触发 以上就是一个组件发射了一个事件 ，可以理解成我发送了一个广播，如果其它组件有需要我的广播，那么请调整到我的频道，这个频道就是你的事件名字，而广播的内容就是你传送的数据，那么问题了，其它组件是用什么方法来接收呢？请看代码 {
handle(yourData)
} )
需要收听广播的组件可以通过我们全局定义的eventHub.$on来接收，接收频道就是广播的事件名字，回调里面有数就是广播内容。 3.更加简洁的写好对js有一定的了解，可能知道js有一个prototype的东西，这个主要的给js对象增加额外的属性。 比如 声明一个对象 然后我们扩展一下这个对象,比如增加一个讲话的方法,这时prototype这个好用的东西就派上用场了 这样就扩展了原来的函数对象了 调用的时候直接 person.say();就会弹出小明来了。这么做的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。 Vue其实就是js一个类库，当然也可以用prototype这个神奇的东西来拓展自定义的属性了，看招： 在初始化Vue.app 之前 加上这样一句： 这样我们在组件内部 就可以直接调用$eventHub 以下是对上面的方法重新 改造: 发布者 接收者 {
handle(yourData).
} )
4.关闭广播关闭广播我们主要通过 $off(你的事件名字)来取消收听就可以啦! 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |