eventBus（封裝） 一個巧妙的解決vue同級組件通信的思路

若是在你項目中須要多處用到同級組件通信，而又不想去寫繁瑣的vuex，能夠參考這個小思路。本人在寫項目中琢磨出來的，感受挺好用，分享一下。

1.在utils文件夾下添加BusEvent.js

註釋已經很詳細了，也很簡單，再也不過多闡述。

import Vue from "vue";
const Bus = new Vue();

/** * 同級組件通信，提交事件 * @param {String} component 要提交的目標組件名稱 * @param {string} action 要調用目標組件的方法名 * @param {any} param 目標組件的方法參數 */
export const BusEmit = (component, action, param) => {
  Bus.$emit(component, action, param);
};

/** * 同級組件通信，監聽銷燬事件 */
export const BusOn = {
  mounted() {
    Bus.$on(`${this.$options.name}`, this.onBusAction);
  },
  beforeDestroy() {
    Bus.$off(`${this.$options.name}`, this.onBusAction);
  },
  methods: {
    onBusAction(action, param) {
      log(`調用組件：${this.$options.name},方法：${action},參數：${param}`);
      this[action](param);
    }
  }
};

複製代碼

2.須要監聽事件的組件

引入 BusOn 掛載在組件的mixins上。

import { BusOn} from "@/utils/BusEvent";
export default {
  name: "app",
  mixins: [BusOn],
  methods: {
      show(is){
          console.log(is);
      }
  }
 
複製代碼

3.發起通信的組件

引入 BusEmit 發起同級組件通信。

import { BusEmit} from "@/utils/BusEvent";
export default {
  name: "child",
  methods: {
      emitShow(is){
         //大概意思：我要調用 app 組件的 show 方法，而且傳了一個 true 的參數
         BusEmit("app","show",true)
      }
  }
複製代碼

好處：

• 不用每一個組件去引入Bus，而後在 mounted 監聽，beforeDestroy 銷燬（eventbus監聽事件必須銷燬），很繁瑣。
• 提供了良好的擴展，你想調用哪一個組件，調用哪一個方法，傳遞什麼參數，很清晰。
• 你能夠在其餘 js 文件 去引入而且調用組件的方法。

好比：在 htttp.js

省略了若干代碼，定義了一個處理報錯信息的函數。

import { BusEmit } from "../utils/event-bus";
**
 * 請求失敗後的錯誤統一處理
 * * @param {Number} status 請求失敗的狀態碼
 */
const errorHandle = err => {
   //....省略
   BusEmit("app","toast",{
        text:'鏈接到服務器失敗',
        time:1000,
    })
}
複製代碼

固然你能夠在 BusEvent.js 進行更多的封裝，或者你有更好的思路，歡迎分享討論。