Vue系列状态管理篇--Bus事件总线篇

Bus – 事件总线

原理：创建一个空的Vue实例，来作为交互的中介

1、创建事件总线

1. 新建一个文件夹bus，在文件夹中新建一个文件 bus.js (也可以不要)

2. 在文件 bus.js 建立以下代码

   import Vue from 'vue'
   

const Bus = new Vue()

export default Bus

3. 在 main.js 导入 bus.js 

​````js
import Bus from "./bus";
Vue.prototype.$bus = Bus;

2、使用事件总线

调用方法：this.$bus

基本就是给$bus绑定各种东西，然后调用$bus获取

1. 给bus绑定事件

<button @click="handleClick">按我</button>  // html
 methods: {                                // js
    handleClick() {
      this.$bus.$emit('on-click', 'hello')
    }
}

2. 获取

mounted() {
    this.$bus.$on('on-click', mes => {
      this.message = mes
    })
}