vue3非父子组件方法调用；vue3使用EventBus；兄弟组件方法调用

---

1.新建eventBus

src/utils/eventBus.js

// import { createApp } from 'vue'
// const app = createApp({})
const listeners = new Map()

export const eventBus = {
  $emit(event, ...args) {
    const callbacks = listeners.get(event) || []
    callbacks.forEach(cb => cb(...args))
  },
  $on(event, callback) {
    if (!listeners.has(event)) {
      listeners.set(event, [])
    }
    listeners.get(event).push(callback)
  },
  $off(event, callback) {
    const callbacks = listeners.get(event)
    if (callbacks) {
      const index = callbacks.indexOf(callback)
      if (index > -1) callbacks.splice(index, 1)
    }
  }
}

2.被动执行方注册事件

import { onMounted, onBeforeUnmount } from "vue"
import { eventBus } from "@/utils/eventBus.js"

const getMsg = (item) => {
  console.log('%c【' + 'item' + '】打印', 'color: red;background:#0f0', item)
}

// 在组件挂载时添加全局点击事件监听器
onMounted(() => {
  eventBus.$off("setMsg", getMsg) // 调用前线清除 防止有历史重复的
  eventBus.$on("setMsg", getMsg)
})
onBeforeUnmount(() => {
  // 页面销毁前清除
  eventBus.$off("setMsg", getMsg)
})

3.主动调用方

import { eventBus } from "@/utils/eventBus.js"
eventBus.$emit("setMsg", '兄弟传参')