vue事件总线(Event Bus)
2019-03-15 11:43
633 查看
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() 来移除所有事件频道, 注意不需要添加任何参数 。
相关文章推荐
- 使用Vue.js创建全局事件总线(Global Event Bus )
- 利用RxJava实现的事件总线(Event Bus)
- 事件总线(Event Bus)
- vue 事件总线问题
- 使用Vue开发网站之路2-多组件通信1(利用bus总线进行事件触发)
- 用RxJava实现事件总线(Event Bus)
- vue - 组件间通信 之 中央事件总线bus
- 用RxJava实现事件总线(Event Bus)
- 用RxJava实现事件总线(Event Bus)
- 事件总线(Event Bus)知多少
- vue 事件总线( vue-bus)非父子组件传值
- 详解用RxJava实现事件总线(Event Bus)
- 用RxJava实现事件总线(Event Bus)
- 用RxJava实现事件总线(Event Bus)
- EventBus使用详解-2-用RxJava实现事件总线(Event Bus)
- 记VUE的v-on:textInput无法执行事件的BUG
- Vue组件之自定义事件的功能图解
- EventBus事件总线初识
- 关于总线事件与内存事件(RFO)
- vue页面父组件滚动触底,子组件触发事件