事件总线vueEvent

一个组件结束后要更新另一个组件数据,但是另一个组件和这个组件没有上下级关系


在 Vue 中,非父子组件之间进行通信通常需要使用事件总线或者其他的全局事件管理器。vueEvent 似乎是一个事件总线对象,通过 emit 方法触发了名为 'updateData' 的事件,并使用 on 方法监听了该事件。这种模式在 Vue 应用中是常见的,它允许不同组件之间进行解耦的通信。

vueEvent.all.delete('updateData'),看起来是在组件卸载前删除了 'updateData' 事件的监听器。这么做的原因可能是为了确保在组件销毁时移除不再需要的事件监听器,以防止内存泄漏和不必要的事件处理。

通常,为了避免内存泄漏和不必要的资源占用,你会在组件销毁前做一些清理工作,包括取消订阅事件、清除定时器等。在这个例子中,vueEvent.all.delete('updateData') 语句的目的就是从事件总线中移除对 'updateData' 事件的监听器。


  //一个组件:
 import { getCurrentInstance, onBeforeUnmount } from 'vue';
 const vueEvent = getCurrentInstance()?.appContext.config.globalProperties.vueEvent;
  vueEvent.emit('updateData');

   
 //另一个组件:
  const vueEvent = getCurrentInstance()?.appContext.config.globalProperties.vueEvent;
  vueEvent.on('updateData', reload);//此处是和onMounted同级

  onBeforeUnmount(() => {
    vueEvent.all.delete('updateData');
  });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值