第四課時: vue狀態管理-Bus

Bus至關於廣播和分發事件的方法。vue如何實現非父子組件間的通訊，能夠經過實例一個vue實例Bus做爲媒介，要相互通訊的兄弟組件之中，都引入Bus，而後經過分別調用Bus事件觸發和監聽來實現通訊和參數傳遞。

Bus.js文件:

import Vue from 'vue'
export default new Vue()

在須要通訊的組件都引入Bus.js

import Bus from '../common/js/bus.js'

添加一個button，點擊後$emit一個事件

<button @click="toBus">子組件傳給兄弟組件</button>

methods

methods: {
    toBus () {
        Bus.$emit('on', '來自兄弟組件')
    }
  }

另外一個組件也import Bus.js 在鉤子函數中監聽on事件

import Bus from '../common/js/bus.js'
export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
       Bus.$on('on', (msg) => {
         this.message = msg
       })
     }
   }