博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中eventbus 多次触发的问题
阅读量:6976 次
发布时间:2019-06-27

本文共 1037 字,大约阅读时间需要 3 分钟。

   相比于react,vue是一个更上手很快的框架。所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的。 组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意组件之间传递数据无非2种方式: 1.vuex 2.eventbus 一般地,小项目中建议用eventbus,具体怎么用呢?
main.jsvar bus = new Vue()// in component A methodbus.$emit('select', 1)// in component B created hookbus.$on('select', function (id) {    console.log('B页面打印:'+id);//1})// in component C created hookbus.$on('select', function(id){    console.log('C页面打印:'+id);//1})
这样就没有问题了吗? 如果只在B页面监听事件,那没有问题(起码表现上)。 如果在B,C2组件监听事件,那就有问题了。只要C组件的页面打开过,在B组件的页面触发事件,C组件页面的监听函数也执行了。讲道理,C页面此时已经销毁了。 我们试一下:先打开C的页面:

 

接下来,我们打开B的页面:

这真真让人迷惑。 vue的作者在git上回答过,解决办法: 在监听的B,C组件beforeDestroy()生命周期函数里取消监听:
beforeDestroy () {    bus.$off('select',this.handle)}

 

这时候,匿名函数就不行了。,C组件在监听的时候,回调函数改成具名函数:
bus.$on('select',this.handle)

  

 

本文的出问题写法,完整文件:

A.vue

  

B.vue

  

C.vue

  

转载于:https://www.cnblogs.com/xiaochongchong/p/8127148.html

你可能感兴趣的文章
Sass (Syntactically Awesome StyleSheets)
查看>>
ASN.1探索 - 3 编码规则与传输语法(3 - PER)(转)
查看>>
Jmeter+ant+jenkins集成
查看>>
使用 DX 编译 Android应用
查看>>
第一章:Nginx安装
查看>>
React-Native学习指南
查看>>
用cssText属性批量操作样式
查看>>
C语言 Web实时消息后台服务器推送技术---GoEasy
查看>>
警惕javascript变量的全局污染问题
查看>>
response小结(三)—输出随机图片(验证码功能实现)
查看>>
【CentOS7】LINUX下面桌面的安装
查看>>
如何禁止浏览器自动填充非登陆input的账号和密码?
查看>>
jquery(ajax)+ashx简单开发框架(原创)
查看>>
Georgia Tech- 新的篇章
查看>>
易错~~
查看>>
Python 序列化pickle/cPickle模块整理
查看>>
(一)排版样式
查看>>
Maven依赖中的scope详解
查看>>
GIT的使用
查看>>
Jsp+Servlet+JavaBean经典MVC模式理解
查看>>