事件总线使用

创建一个eventBus.js

import { reactive } from 'vue'

// 创建一个响应式的事件对象用于存储事件处理器
const eventBus = reactive({})

// 添加事件监听器的函数
function on(eventName, handler) {
  if (!eventBus[eventName]) {
    eventBus[eventName] = []
  }
  eventBus[eventName].push(handler)
}

// 触发事件的函数
function emit(eventName, ...args) {
  console.log('eventBusEmit', eventName)

  const handlers = eventBus[eventName]
  if (handlers) {
    handlers.forEach((handler) => handler(...args))
  }
}

// 移除事件监听器的函数（可选）
function off(eventName, handler) {
  if (eventBus[eventName]) {
    eventBus[eventName] = eventBus[eventName].filter((h) => h !== handler)
  }
}

export default {
  on,
  emit,
  off
}

发送事件

import eventBus from '@/utils/eventBus'
eventBus.emit('globalMessageBoxShow')

监听事件

eventBus.on('globalMessageBoxShow', () => {
    
  })

原文地址：https://blog.csdn.net/qq_44255146/article/details/140280459

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！