vue中eventbus被多次触发如何解决

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue中eventbus被多次触发如何解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4698字，纯文字阅读大概需要7分钟。

内容图文

一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（小参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，）本文主要介绍vue中eventbus被多次触发以及踩过的坑，小编觉得挺不错的，现在分享给大家，希望能帮助到大家。

实现目标：

点击之后，bus emit事件，然后顺便跳转路由到/moneyRecord页面。

接下来就是在MoneyRecord页面中去on接收这个事件，然后接受参数。

就当我欣喜若狂的时候，觉得自己只要在页面A触发了get事件，页面B中就会理所当然的接受了数据。然而，结果却不如人意，看一下下面的动图。

主要是看“”这是从上个页面传来的数据这一行数据的输出次数情况来判断事件触发次数。“”

不知道你有没有发现，就是我第一次进去list页面的时候，我随便点击一下list下的任何一个item，控制台没有输出。但是当我第二次再点击触发事件的时候，就会输出一个测试数据。再一次进去点击，就输出两个数据。。。依次增加了。（控制台上那个“这是从上个页面传来的数据”就是测试数据）

所以，有两个问题。

问题：

1. 问题1： 为什么第一次触发的时候页面B中的on事件没有被触发

2. 问题2： 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。

解决

针对问题1

这个还得从vue的生命周期说起了，我先进行了测试，就是当从页面组件A跳转到页面组件B的时候，两个组件的生命周期分别是怎么样的，关于vue的生命周期具体每一个时期做什么事情我就不再赘述了，下面po一张vue生命周期的图。

我自己做了实验来验证，这个页面跳转过程中，这两个组件的生命周期的执行情况。

测试结果图：

其实，可以通过结果清楚看到，当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是没有监听到的。

再看一下，红色的是B页面组件，当你从页面A到页面B跳转的时候，发生了什么？首先是先B组件先created然后beforeMount接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed.

所以，我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经触发了

所以可以，在beforeDestory的时候，$emit事件。

接下来。看一下修改之后的效果

可以看到，就是第一次点击list的时候，也就是第一次触发emit事件的时候，控制太就输出了，所以在beforeDestoryed去$emit是起到作用的，B页面组件也监听$on到了。

但是，好像，就是事件的触发还是会依次增加，就是控制台的输出每次都有所增加了。。。

解决：

看一下github上提出的。https://github.com/vuejs/vue/issues/3399

尤大大提出了以下解决：

*就是说，这个$on事件是不会自动清楚销毁的，需要我们手动来销毁。（不过我不太清楚这里的external bus 是什么意思，有大神能解答一下的吗，尤大大也提到如果是注册的是external bus 的时候需要清除）****

所以。我在B组件页面中添加Bus.$off来关闭。代码如下：

来看一下输出的结果

t可以看到，控制台第一次进去的时候就有输出，而且输出的不会逐次增加

*当然，尤大大还说可以写一个mixin？我还不知道是什么？以后在研究一下。

总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意亮点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。

相关推荐：

guava eventbus实例代码详解

Java-类库-Guava-EventBus

vue微信公众号开发踩坑记录

以上就是vue中eventbus被多次触发如何解决的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的vue中eventbus被多次触发如何解决全部内容，希望文章能够帮你解决vue中eventbus被多次触发如何解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---