避免师傅抽查赶紧学 vue篇之事件总线(EventBus)

本文详细介绍了Vue中的事件总线(EventBus)如何用于组件间的通信,通过在main.js中创建全局事件总线,并在组件中分别使用$emit和$on方法实现数据传递。在x.vue中触发事件,在y.vue中监听并响应事件。同时,展示了在beforeRouteLeave钩子中使用$off移除监听器,以避免内存泄漏。这种通信方式在不涉及祖先组件或vuex的情况下非常实用。
摘要由CSDN通过智能技术生成

vue篇之事件总线(EventBus)

Vue事件总线(EventBus)使用详细介绍

// main.js
Vue.prototype.$EventBus = new Vue()
//x.vue
this.$eventBus.$emit("justTest", true);
//y.vue
mounted(){
this.$eventBus.$on("justTest", res=>{
      console.log(res,'this.$eventBus.$on("justTest"!!!!!!!!!!!!!!!!!')
    });
}
//x.vue
beforeRouteLeave(to, from, next) {   
    console.log('触发 beforeRouteLeave!!!!!')
    this.$eventBus.$off("justTest");
    }

y.vue的mounted相当于一个开关的开,y.vue第一次渲染完毕把开关打开,再进入x.vue才会打印justTest"!!!!!!!!!!!!!!!!!,离开x.vue把开关关掉,再进入x.vue不会再次打印justTest"!!!!!!!!!!!!!!!!!(除非再进入y.vue把开关打开)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值