vue中eventbus被多次触发以及踩过的坑

这篇文章主要了Vue中Eventbus的多次触发问题以及遇到的挑战。对于长沙网络推广来说，这是一个很好的实践案例，现在分享给大家，希望能为大家提供参考。

在Web开发中，我们经常需要处理不同组件之间的数据传递。假设我们有两个页面组件A和B，当用户在页面A上执行某个操作时，我们希望将某些数据传递给页面B。对于小型项目，我们通常会使用路由参数或Vuex来处理数据传递。但对于尚未涉及大型项目的开发者来说，Eventbus提供了一个方便的解决方案。

使用Eventbus进行跨组件通信非常简单。在Vue中，我们可以通过bus对象实现组件间的通信。一开始，我对这种方法充满信心，并尝试用它来解决上述问题。

在实际操作中，我遇到了两个问题。首先是，当我第一次从页面A跳转到页面B并触发事件时，页面B的on事件没有被触发。当我后续再次触发事件时，每次触发都会执行越来越多的on事件。

针对这些问题，我开始深入研究并找到了解决方案。关于问题1，它与Vue的生命周期有关。当从页面组件A跳转到页面组件B时，需要了解两个组件的生命周期执行情况。通过测试，我发现某些情况下，页面B的初始化过程可能导致on事件未被正确触发。

为了解决这个问题，我意识到需要在页面B的适当生命周期钩子函数中订阅事件。例如，在created钩子函数中订阅事件可以确保在页面B加载时立即接收到事件。为了确保在组件销毁时不再接收事件，我们需要使用$off方法来移除事件监听器。

对于问题2，我了解到Eventbus的事件监听器在默认情况下是持久的，这意味着如果不手动移除它们，它们将一直存在并导致重复触发。为了解决这个问题，我需要在不再需要监听事件时手动移除监听器。这可以通过在组件销毁时调用$off方法来实现。

测试结果清晰地显示，当页面B还未生成时，页面A中的事件并未触发页面B的监听。而当页面B创建并挂载后，页面A的某些事件才开始被触发。这就像是在舞台上，第二幕开始之前，第一幕的演员还在表演。

接下来，你提到在A页面组件中的`editList`方法，当点击编辑时，需要传递多个参数并跳转到另一个页面。而在组件销毁之前，你选择在`beforeDestroy`钩子中通过事件总线`bus`发射事件，传递需要的数据。这就像是在乐曲的尾声，指挥者举起指挥棒，最后一次命令乐队的成员们演奏出最后的乐章。

修改后的代码和测试结果表明，在组件销毁前发射的事件确实被B页面组件监听到了。这就像是你成功地将信息传递给了下一位表演者，让他们在下一幕中继续你的表演。你发现每次触发事件时，控制台输出都在增加。这是因为你没有手动销毁事件监听器，导致了多次触发事件。

针对这个问题，Vue的创始人尤大大给出了解决方案：需要手动销毁事件监听器。这就像是在乐曲结束时，指挥者向乐队发出指令，停止演奏并清理舞台，为下一场演出做好准备。你可以在你的组件中通过解绑事件监听器来避免不必要的触发。

对于"external bus"的疑惑，它可能指的是一个外部的、跨组件的事件总线，用于在Vue组件间进行通信和数据传递。这在某些场景下，尤其是当组件层级嵌套复杂或需要跨多个组件层级进行通信时，显得尤为有用。关于尤大大提到的注册external bus时需要清除的部分，可能是指在使用bus进行通信时，需要注意在适当的时候进行解绑和清理，避免不必要的内存占用和潜在的问题。

在B组件页面中，为了确保数据的正确传递和避免不必要的监听事件，我们可以添加Bus.$off来关闭相关事件监听。具体的代码实现如下：

在B组件的`beforeDestroy`生命周期钩子中，销毁对应的事件监听。

```javascript

beforeDestroy() {

bus.$off('get', this.myhandle); // 在组件销毁前取消对应的事件监听

},

```

这样，当组件B被销毁时，与之相关的事件监听也会被清除，避免了不必要的资源浪费。

从控制台输出的结果来看，当第一次进入页面时，可以看到有输出，并且输出的结果不会逐次增加，这说明我们的处理方式是正确的。尤大大提到的mixin是一个Vue的扩展功能，它可以用来为多个组件重用逻辑代码。如果你对mixin还不熟悉，可以进一步去研究和学习。

当我们使用bus来进行页面组件之间的数据传递时，需要注意两个关键点：一是在组件A中触发事件的$emit应在beforeDestroy生命周期内调用；二是在组件B中监听事件$on后，记得在适当的时候进行销毁。

对于实现页面组件之间的数据传递的好方法，除了使用bus和vuex外，还有以下几种常见的方式：

1. props与$emit: 适合父子组件间的通信。

2. vuex: 适合大规模应用的状态管理。

3. 本地存储（localStorage/sessionStorage）: 适合长期存储和跨页面/组件的数据共享。

4. 全局的单例模式: 创建全局的单例对象来作为通信的桥梁。

5. 使用第三方库: 如Event Bus、Redux等库也提供了组件间通信的解决方案。

以上就是关于使用bus进行Vue组件间数据传递的相关内容，希望对大家的学习有所帮助。也希望大家能够分享自己的经验和心得，共同学习进步。也请大家多多支持狼蚁SEO。