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

叫我啊草啊發表於2019-03-01
封裝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 進行更多的封裝，或者你有更好的思路，歡迎分享討論。

相關文章