前言

使用過vue的同學大多數都知道$emit 與$on的使用。我們僅僅知道使用，有時候是完全不夠的。現在我就帶領大家寫一個簡單類似於vue空實例的中間件。

非父子組件的通信

非父子組件的通信vue官網給出這樣的解決方案。
有時候，非父子關系的兩個組件之間也需要通信。在簡單的場景下，可以使用一個空的 Vue 實例作為事件總線：

var bus = new Vue()
// 觸發組件 A 中的事件
bus.$emit(‘id-selected‘, 1)
// 在組件 B 創建的鉤子中監聽事件
bus.$on(‘id-selected‘, function (id) {
  // ...
})

簡單例子

下面是一個很簡單的例子

//工具
var myBus = (function() {
    var clienlist = {},
        addlisten, trigger, remove;
    /**
     * 增加訂閱者
     * @key {String} 類型
     * @fn {Function} 回掉函數
     * */
    addlisten = function(key, fn) {
        if(!clienlist[key]) {
            clienlist[key] = [];
        }
        clienlist[key].push(fn);
    };
    /**
     * 發布消息
     * */
    trigger = function() {
        var key = [].shift.call(arguments), //取出消息類型
            fns = clienlist[key]; //取出該類型的對應的消息集合
        if(!fns || fns.length === 0) {
            return false;
        }
        for(var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments);
        }
    };
    /**
     * 刪除訂閱
     * @key {String} 類型
     * @fn {Function} 回掉函數
     * */
    remove = function(key, fn) {
        var fns = clienlist[key]; //取出該類型的對應的消息集合
        if(!fns) { //如果對應的key沒有訂閱直接返回
            return false;
        }
        if(!fn) { //如果沒有傳入具體的回掉，則表示需要取消所有訂閱
            fns && (fns.length = 0);
        } else {
            for(var l = fns.length - 1; l >= 0; l--) { //遍歷回掉函數列表
                if(fn === fns[l]) {
                    fns.splice(l, 1); //刪除訂閱者的回掉
                }
            }
        }
    };
    return {
        $on: addlisten,
        $emit: trigger,
        $off: remove
    }
})();
//組件一
Vue.component(‘vv-count‘, {
    props: ["count"],
    template: ‘<div>                 <span>{{count}}</span><button @click="handelClick" type="button">計算</button>               </div>‘,
    methods: {
        handelClick() {
            console.log(‘vv-count總計：‘, this.count);

            if(vue_bus){
                //觸發發布--使用vue
                bus.$emit("vv_count", this.count,‘這是使用vue的‘)
             }else{
                //觸發發布--使用自己的
                myBus.$emit("vv_count", this.count,‘這是自己寫的‘)
             }
        }
    }
});
//組件二
Vue.component(‘vv-count1‘, {
    props: ["count"],
    template: ‘<div>                 <span>{{count}}</span><button @click="handelClick" type="button">計算</button>               </div>‘,
    methods: {
        handelClick() {
            console.log(‘vv-count1總計：‘, this.count);
             
             if(vue_bus){
                //觸發發布
                bus.$emit("vv_count", this.count)
             }else{
                //觸發發布
                myBus.$emit("vv_count", this.count)
             }
            
        }
    }
});

var vue_bus=true;// true：使用vue的事件總線，false:使用自己的事件總線


if(vue_bus){
    //中間件
    var bus = new Vue();
    //使用vue的事件總線--訂閱
    bus.$on("vv_count", function() {
        console.log("使用bus發布的參數==", arguments);
    });
}else{
    //使用自己的事件總線--訂閱
    myBus.$on("vv_count", function() {
        console.log("使用myBus發布的參數==", arguments);
    });
}


new Vue({
    el: "#app"
});
 

上面代碼可以使用vue_bus=true 或者false 相互切換進行看效果。如圖所示：

如果想看更加詳細的講解請預覽發布-訂閱模式 or 發布-訂閱模式

總結

vue中的發布訂閱跟自己寫的發布訂閱原理是相同的，希望大家能夠get到知識。

打賞通道--我覺得不會有打賞。

寫一個簡單vue 中間件，$emit、$on