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

MartinDai 發布于2019-08-23 13:08 / 3515人閱讀

摘要：同級組件通訊，提交事件要提交的目標組件名稱要調用目標組件的方法名目標組件的方法參數同級組件通訊，監聽銷毀事件調用組件方法參數需要監聽事件的組件引入掛載在組件的上。發起通訊的組件引入發起同級組件通訊。

如果在你項目中需要多處用到同級組件通訊，而又不想去寫繁瑣的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 進行更多的封裝，或者你有更好的思路，歡迎分享討論。

云服務器 GPU云服務器 vue父子組件通訊一個封裝的Ajax類一段巧妙的css vue組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99244.html

vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 評論0 收藏0
vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

tunny 2019-08-01 17:58 評論0 收藏0
Vue仿餓了么app項目總結

摘要：前言這是我第一個基于的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。即將屬性和請求返回數據對象合并到空對象，然后賦值給這里加上即提供了一種可擴展的機制，倘若原來的屬性中有預定義的其他屬性。前言這是我第一個基于 Vue 的項目作品，目的很簡單，學以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現出來。源代碼：ht...

FrozenMap 2019-08-26 11:47 評論0 收藏0
「Vue實踐」武裝你的前端項目

摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實例的方法清除可當你有多個時，就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄接口模塊處理 Vue組件動態注冊頁面性能調試：Hiper Vue高階組件封裝性能優化：eventBus封裝 webpack插件：真香本文項目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 評論0 收藏0
vue -- 非父子組件傳值，事件總線（eventbus）的使用方式

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實就是訂閱發布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監聽，也就是訂閱），一個是emit（觸發，也就...

zone 2019-08-23 14:37 評論0 收藏0