vue組件通信之$bus（事件總線）

$bus 思路是在全局掛載一個實例，通過這個實例里的事件派發和事件監聽實現跨組件通信，設計模式叫做觀察者模式。

使用場景：跨多層級組件傳參，不順路要坐bus。

第一步

創建一個$bus對象 （main.js）

class Bus {
  constructor(){
    this.callbacks = {}
  }
  $on(name, fn){
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  $emit(name, args){
    if(this.callbacks[name]){
      this.callbacks[name].forEach(cb => cb(args))
    }
  }
}

第二步 

實例化Bus並掛載到vue全局上 （main.js）

Vue.prototype.$bus = new Bus();

經過上面兩個步驟我們就創建了一個全局的$bus對象，並且可以隨時隨地調用它里面的$on和$emit方法。

 

第三步

在需要講數據傳遞出去的組件里做事件派發,即調用$emit方法

第一個參數是事件名稱，第二個參數是要傳遞的數據

this.$bus.$emit("event1","somethings from helloworld");

 

第四步

在需要接收數據的組件里做事件監聽，即調用$on方法，監聽的方法一般寫在mounted里面

this.$bus.$on("event1",function(aaa){
     console.log(aaa)
})

 

以上就是事件總線的方法