vue中使用$bus

最近在看他人vue項目中發現別人使用了$bus,感覺使用很方便

查了查，bus主要是解決無關系組件之間的交互問題，當然父子組件我們可以通過自定義事件來交互（子傳父）

另外一種解決無關系組件間的交互問題就是使用vuex，也很方便。

那么bus最主要的是無關系組件間的交互響應，相當於父子組件的自定義事件

那么bus應該如何在項目中使用

首先在vue實例上綁定一個bus實例（其實就是一個全新的vue實例，此實例擁有vue的全部方法）例子：

main.js

Vue.prototype.$bus = new Vue() // event Bus 用於無關系組件間的通信。

在組件中就可以這樣使用

假設有兩個不相關的a，b組件

b.vue中

mounted() {
    this.$bus.$on('isCalled', this.isCalled)
    this.$bus.$on('missCall', this.missCall)
    this.$bus.$on('isRefused', this.isRefused)
    this.$bus.$on('isAccept', this.isAccept)
    this.$bus.$on('isHungUp', this.isHungUp)
    this.$bus.$on('busy', this.busy)
    this.$bus.$on('video-call', this.videoCall)
  },

a.vue中

handleEvent(messageList) {
      if (xxxx) {
        this.$bus.$emit('isCalled')
      }
      if (xxx) {
        this.$bus.$emit('missCall')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
      if (xxx) {
        this.$bus.$emit('missCall')
      }
      if (xxx) {
        this.$bus.$emit('isAccept')
      }
      if (xxx) {
        this.$bus.$emit('isHungUp')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
      if (xxx) {
        this.$bus.$emit('isRefused')
      }
    },

 

vue中$emit與$on

 

　　var Event = new Vue();　　　　　　相當於又new了一個vue實例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　　　   發送數據，第一個參數是發送數據的名稱，接收時還用這個名字接收，第二個參數是這個數據現在的位置；

　　Event.$on('msg',function(msg){　　接收數據，第一個參數是數據的名字，與發送時的名字對應，第二個參數是一個方法，要對數據的操作

　　　　/這里是對數據的操作

　　})

 

 

 

。