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