第四课时: 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
       })
     }
   }