vue3使用事件总线传值

最新推荐文章于 2025-06-27 16:16:45 发布

月隐Labrador

最新推荐文章于 2025-06-27 16:16:45 发布

阅读量683

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45458830/article/details/134647541

文章介绍了Vue中如何使用$bus对象进行事件监听（on）和触发（emit），特别是在组件实例中通过`getCurrentInstance()`获取$bus并实现代理方法，强调了bus.on无需显式调用方法的优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bus.on 接收

    import { computed, defineComponent, getCurrentInstance } from 'vue' 
    
    const instance = getCurrentInstance()
    if(instance){
      const bus = instance?.appContext.config.globalProperties.$bus
      // 一个神奇的事情，bus.on自己有触发器，不需要写在方法里 用方法名()的方式 ,就可以调用=======================这也是小重点====================
      //=========只要bus.emit发布了，bus.on就能接收到；所以bus.on可以不用写在方法里，然后用方法名()的方式调用；直接就可以执行====================
      bus.on('activeMenuPath', (data) => {
        for(let i = 0;i < navData.value.length ; i++){
          if(data == navData.value[i].path){
            selectPath.value = data;
            break
          }else{
            selectPath.value = ''
          }
        }
      })
    }

bus.emit 发布

import { computed, defineComponent, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const activeMenu = computed(() => {
      if(instance){
          const bus = instance.appContext.config.globalProperties.$bus
          bus.emit('activeMenuPath',route.path)
       }
       if(route.meta.activeMenu) return route.meta.activeMenu
       return route.path
})