使用eventBus实现vue组件间通信

原创已于 2022-08-18 11:40:27 修改 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-15 15:16:17 首次发布

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文介绍了如何在Vue中通过创建一个EventBus.js文件来实现兄弟组件之间的参数传递。首先，创建并导出一个新的Vue实例作为事件总线。然后，在需要发送参数的组件中使用$emit触发事件，并传递数据。接收参数的组件则在created或mounted钩子中使用$on监听事件，接收到数据后执行相应操作。别忘了在beforeDestroy中移除监听以防止内存泄漏。此外，文章还提到可以将EventBus挂载到Vue的原型上，以便全局使用。

今天来简单说下vue兄弟组件传参方法 – eventBus

首先新建一个js文件，具体放哪里看自己的开发习惯，然后上代码

import Vue from 'vue'
const Bus = new Vue()
export default Bus

然后在两个页面分别引入这个js文件

import Bus from '@/utils/bus'   //  按你自己写的位置引入

传递参数的组件

//  通过点击或者其他事件触发  开始向目标页面传递参数
Bus.$emit('eventName', data)

在接受参数的组件

// 在created里 监听这个事件  然后执行一些操作   
//  如果要执行一些操作 建议放在mounted里面  配合 $nexttick回调
Bus.$on('eventName', data => {
	console.log(data)
	// do something
})

在这里有一点要注意下需要在接受参数的组件的beforeDestroy里面将监听的事件移除掉，有可能的话进来这个页面一次就会多执行一次监听事件，具体情况具体分析，如果没有则不需要这一步

beforeDestroy() {
    Bus.$off('eventName')
 },

如果觉得按需引入比较麻烦的的话，可以把bus挂在vue的原型上
main.js

import Bus from './util/bus'

Vue.prototype.$bus = Bus

在页面中用的话直接就可以用

this.$bus.$emit()
this.$bus.$on()
this.$bus.$off()