vue事件总线(Event Bus)

本文介绍如何在Vue项目中利用EventBus解决组件间通信问题,特别是在非兄弟组件间传递菜单栏伸缩状态,以实现图表自适应调整。通过创建和使用EventBus,发送和监听'collapse'事件,确保图表能够根据菜单栏状态实时更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

bus总线

使用背景

数据展示项目中,侧边菜单栏有一个展开收缩的功能,这会导致右侧的宽度会发生变化,但是图表并没有根据宽度的变化自适应。于是想到根据菜单栏的伸缩状态去手动resize图表,这个状态需要在非兄弟组件之间传递,于是用了vue中的Event Bus.

Event Bus使用方法

1.Event Bus的初始化
Event Bus的创建方式有两种,

一种是创建一个.js文件:

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

另一种是直接在main.js中初始化

<!--main.js-->
Vue.prototype.$EventBus = new Vue()

2.发送事件
在点击菜单栏伸缩按钮的组件中的传递一个collpase事件,并且传递一个状态(这里以.js的方式实现)
import bus from ‘…/common/bus’;

// 侧边栏折叠
      collapseChage() {
        this.collapse = !this.collapse;
        bus.$emit('collapse', this.collapse);
      }

3.监听事件
在需要根据菜单收缩做自适应图表的组建中监听这个事件

bus.$on('collapse', msg => {
          setTimeout(function () {
            _this.chart1.resize()
            _this.chart2.resize()
          },500)
      })

4.移除事件监听者
如果需要移除对某个事件的监听,可以这样写:

import { eventBus } from './event-bus.js'
EventBus.$off('collapse', {})

你也可以使用 EventBus.off(‘collapse’)来移除应用内所有对此事件的监听。或者直接调用EventBus.off(‘collapse’) 来移除应用内所有对此事件的监听。或者直接调用EventBus.off(collapse)EventBus.off() 来移除所有事件频道, 注意不需要添加任何参数 。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值