vue实现跨组件通信,适用于兄弟通信和父子通信

33 阅读1分钟

1.在src目录下新建一个 untils/event-bus.js

// event-bus.js
export const EventBus = {
  events: {},
  $on(event, callback) {
    this.events[event] = this.events[event] || []
    this.events[event].push(callback)
  },
  $emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach((cb) => cb(data))
    }
  },
  $off(event) {
    delete this.events[event]
  },
}


  1. 你父组件或者A子组件要用某个函数方法 在当前组件
 import { EventBus } from '@/utils/event-bus'
  this.getTableData() //表格数据
  EventBus.$on('call-get-list', this.getTableData)

3.假如说你B组件要用同级兄弟A组件的方法或者父组件的, 直接

 EventBus.$emit('call-get-list')

这个适用于嵌套复杂深层的项目