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
    })
}