vue2.0s中eventBus实现兄弟组件通信的示例代码

在Vue的世界里，组件间的通信一直是一个重要的议题。在Vue 1.x时代，我们使用vm.$dispatch和vm.$broadcast来传递消息。但到了Vue 2.x，这种方式已经被废弃。对于大型项目来说，从一开始就规划好Vuex的使用是非常明智的选择。对于小型项目或者在开发过程中意识到需要进行组件间通信的情况，Event Bus为我们提供了一个便捷的途径。

想象这样一个场景：我们有三个组件——main.vue、click.vue和show.vue。click和show是main组件下的兄弟组件。click组件通过v-for在父组件中渲染了多个列表项。我们的目标是实现在click组件中的点击事件后，show组件能够识别并输出点击的是哪个DOM元素。

我们需要创建一个Event Bus。在bus.js文件中，我们简单地导入Vue并创建一个新的Vue实例。这个实例将成为我们通信的桥梁。

接下来，在click组件中，我们监听点击事件。每当点击发生时，我们通过bus实例触发一个名为'getTarget'的事件，并将点击事件的target作为参数传递出去。这样一来，click组件的点击事件就能够传递信息给其他组件了。

而show组件的任务是接收这些信息。在show组件的created钩子函数中，我们监听bus实例上的'getTarget'事件。每当该事件被触发时，我们就能够接收到传递的参数（这里是点击事件的target），并进行相应的处理，比如输出到控制台。

通过这种方式，Event Bus帮助我们实现了兄弟组件间的便捷通信。虽然对于复杂的大型项目来说，使用Vuex进行状态管理更为合适，但对于简单的需求或者作为临时解决方案，Event Bus是一个非常实用的工具。

希望这篇文章能够帮助大家更好地理解Vue中Event Bus的用法，并能在实际项目中灵活应用。也希望大家能够关注和支持我们的博客或网站——狼蚁SEO，我们会持续分享更多有关前端开发和SEO优化的实用知识。