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 相关文章推荐
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JavaScript运行原理分析
Feb 09 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
python进行两个表格对比的方法
2018/06/27 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
廉洁使者实施方案
2014/03/29 职场文书
程序员求职信
2014/04/16 职场文书
项目合作意向书模板
2014/07/29 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书