事件总线vueEvent

作者 : admin 本文共779个字,预计阅读时间需要2分钟 发布时间: 2024-06-9 共3人阅读

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

在 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');
  });

本站无任何商业行为
个人在线分享 » 事件总线vueEvent
E-->