Vue項目中的eventBus統一自動關閉頁簽的處理方法

      項目中遇到了業務審查完成後頁簽不關閉造成使用者可能重複進行送出的隐患，如果每位同學都寫自己的頁簽關閉，有可能漏處理或後期不好維護。 在此進行統一封裝，需要時調用即可。 上操作

前期鋪墊：

     eventBus共享資料使用場景: 不需要重複的解綁和綁定的場景下使用bus。主要是在要互相通信的兄弟元件之中，都引入一個新的vue執行個體，然後通過分别調用這個執行個體的事件觸發和監聽來實作通信和參數傳遞。下面以某種行為自動觸發頁簽關閉功能為例：

1、首先在main.js  中進行注冊：這種方式簡單易懂

Vue.prototype.$Eventbus = new Vue(); //建立eventBus共享資料
           

   -->也可以建立一個js檔案，來建立出我們的eventBus：   比較煩，後期使用還得引入，筆主不推薦:(

import Vue from 'vue';  
export default new Vue();
           

2、邏輯入口處處理：

//關閉頁簽邏輯方法，在頁簽處統一處理

this.$Eventbus.$on("closeTab", function (val) {
                _this.removeTab(val);  //子元件通過$on接收對應id值，滿足即執行邏輯
});
           

3、元件封裝：    

可以在例如utils.js  中進行元件封裝        

Vue.prototype.$closeTab = function (routeName) {
    this.$Eventbus.$emit("closeTab", routeName);  //父元件通過$emit發送調用id
}
           

4、場景調用：   

this.$closeTab(this.$route.name)
           

PS: 非常簡單，某些功能還是前期動動小腦，後期省一大堆事，系統還穩定耐cao:>   做事情要用心呐