eventBus

359 阅读1分钟

eventBus 事件总线

平时我们想要传值的话可以:父传子用 props 子传父用this.$emit,如果层级比较深的,就显得过去臃肿,这时候eventBus就起到了作用。 简单来说,他就相当于一个公共的组件,谁都可以吧值传给他,然后谁都可以吧值拿出来

  • 目前的理解,还不全面,后续补上

看代码

组件一

import eventBus from "@/utils/EventBus"; //引用
import { eventOn, eventOff } from "@/utils/Event";

eventBus.$emit('事件名', data) //发布事件

//destroyed:在生命周期钩子销毁
destroyed(){
  eventOff('事件名')
}

组件二

import eventBus from "@/utils/EventBus"; //引用
import { eventOn, eventOff } from "@/utils/Event";

//任意组件接收,在data里创建一个数据接收event,例如:
data:{
  return (){
    event:{
      '事件名': method
    }
  }
}

methods:{
  method(val){  //这里的val是 传过来的data
    
  }
}

mounted(){
  eventOn(this.event) //统一全部订阅
}