Vue事件总线(EventBus)、$on、$emit、$off 在之前我们只用过父传子,子传父进行传数据,这时候当组件嵌套比较深或比较复杂的情况,这时候就用到了事件总线 (EventBus) 如何理解事件总线呢,你可以理解为用来传输数据的一条线 注意点:有组件发布事件后 剩余的所有组件都可以进行监听事件 一、使用EventBus 1. 创建...
beforeDestroy() { EventBus.$off('my-event'); } 三、实例说明 下面通过一个具体的例子来说明如何在 Vue 项目中使用 EventBus。 3.1 创建 EventBus 首先创建eventBus.js文件: import Vue from 'vue'; export const EventBus = new Vue(); 3.2 组件 A 发布事件 在组件 A 中引入 EventBus 并发布事件: ...
exportfunctionoffPatients(fn) { console.log('暂时取消移除方法') window.eventBus.$off(events.GET_PATIENT_INFO, fn) window.eventBus.$off(events.GET_PATIENTLIST_INFO, fn) window.eventBus.$off(events.TASK_CENTER_INFO, fn) } 之前也比较少用eventBus去做事件的监听,然后无脑的抄了波作业。呃呃,这...
EventBus.$off('aMsg', {}) 你也可以使用EventBus.$off('aMsg')来移除应用内所有对此某个事件的监听。或者直接调用EventBus.$off()来移除所有事件频道,不需要添加任何参数 。 上面就是EventBus的使用方法,是不是很简单。上面的示例中我们也看到了,每次使用EventBus时都需要在各组件中引入event-bus.js。事实上...
EventBus.$off('custom-event', this.eventBusListener); } EventBus 在前端(React 中)的使用 在React 中,没有像 Vue 中的事件总线那样的直接内置机制。React 通常使用 props 和回调函数来实现组件之间的通信。然而,如果你的应用需要在不适用 props 传递的情况下进行全局事件的订阅和发布,可以使用第三方库,比如...
on就是往events里添加eventName和相应的fn emit就是触发事件,执行事件的函数数组, off就是删除事件,从events里删除eventName和相应的fn 但是哈,Vue 实例本身就有这样的一套逻辑,我们只需要弄个实例就行,并不需要我们写上面这一坨。 Vue.prototype.$bus = new Vue();...
import{eventBus}from'./event-bus.js'EventBus.$off('aMsg',{}) 你也可以使用EventBus.$off('aMsg')来移除应用内所有对此某个事件的监听。或者直接调用EventBus.$off()来移除所有事件频道,不需要添加任何参数 。 上面就是EventBus的使用方法,是不是很简单。上面的示例中我们也看到了,每次使用EventBus时都需...
到事件总线中的aMsg事件*/this.$EventBus.$on("aMsg",(data)=>{//将A组件传递过来的参数data赋值给msgBthis.msgB=data;});},beforeDestroy(){//移除监听事件"aMsg"this.$EventBus.$off("aMsg")}}; 结束语 好了,对于vue中的事件总线的讲解就到这里了,这也是我今天在做项目时用到的一个小知识点,接...
$off(name, id) { // 删除存储在事件列表中的该事件 delete this.eventObj[name][id]; console.info(`id为${id}的事件已被取消订阅`) // 如果这是最后一个订阅者,则删除整个对象 if (!Object.keys(this.eventObj).length) { delete this.eventObj[name]; ...
this.bus.$off(this.$route.path); }, 这样就完成了事件的注销操作,可以注销掉当前事件。 坑二 虽然我们在生命周期中注销了事件,然而还是发现事件会多次执行,问题依旧在,那是什么原因呢? 经过打印日志后发现,问题出在事件名上面,由于我是用的 this.route.path作为事件名,在注销的时候也是想当然的用this. ...