class EventBus{
	constructor(){
		// 1.處理事件對應(yīng)的處理函數(shù)
		this.sub = {}
	}
	$on(event,fn){
		if(!this.sub[event]){
			// 2.判斷sub是否已經(jīng)存在該事件了，沒有的話就賦值一個數(shù)組，用來存儲觸發(fā)函數(shù)
			this.sub[event] = []
		}
		// 3.將函數(shù)push到對應(yīng)的事件中
		this.sub[event].push(fn)
	}
	$emit(event){
		if(this.sub[event]){
			this.sub[event].forEach(fn=>{
				fn() //4.執(zhí)行對應(yīng)事件中的處理函數(shù)
			})
		}
	}
}
// 信號中心
const vm = new EventBus()
// 訂閱事件
vm.$on('click',()=>{console.log('觸發(fā)了click事件')})
vm.$on('change',()=>{console.log('觸發(fā)了change事件')})
// 發(fā)布訂閱
vm.$emit('click')
vm.$emit('change')

$emit和$on用法深挖

俗稱的 e m i t 和 emit和 emit和on就是消費(fèi)和定義，咱們在代碼中講解

<body>
    <div id="app">
<button @click="add">測試</button>

            </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });
    </script>
</body>

首先剖析一下$on的原理實(shí)現(xiàn)

先在create加個斷點(diǎn)

我們會發(fā)現(xiàn)他會跳到on的源碼中

我們傳入的參數(shù)是兩個，第一個是我們事件的名稱，第二個是我們事件處理方法對應(yīng)的event和fn

首先他把this傳給vm
然后判斷event是不是一個數(shù)組，如果是個數(shù)組他就會以循環(huán)的方式進(jìn)行賦值，繼續(xù)執(zhí)行on的迭代方法，如果不是數(shù)組進(jìn)入else的邏輯判斷去找他是不是包含了event，如果不包含他會自己創(chuàng)建個event設(shè)置成空數(shù)組，把新建的處理函數(shù)push進(jìn)去，這說明我們在定義個事件的時候，是可以同時為一個事件定義多個執(zhí)行方法，最后找到定義的方法并返回
定義第二種方法看代碼

 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on('my_event',this.datalist)
                this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                datalist2(e){
               console.log('我是第二種方法',e);
               
                },
                add(){
                    this.$emit('my_event','hello wu')
                }
            }
        });

說明定義多個執(zhí)行方法也是沒問題的

有一點(diǎn)要記住先定義的先觸發(fā)

還有一個點(diǎn)他是可以是個數(shù)組，在不同的事件綁定同一個處理方法，如下代碼

 var vm = new Vue({
            el: '#app',
            data: {
                message:'ok'
            },
            created() {
                this.$on(['my_event','my_event2'],this.datalist)
                console.log(this._events);
                
                // this.$on('my_event',this.datalist2)
            },
            methods: {
                datalist(e){
               console.log(this.message,e);
               
                },
                datalist2(e){
               console.log('我是第二種方法',e);
               
                },
                add(){
                    this.$emit('my_event2','hello wu')
                }
            }
        });

換成第二個數(shù)組他還是可以實(shí)現(xiàn)

分析$emit

先打個斷點(diǎn)

1.emit的源碼

2.關(guān)鍵的一步：先通過名稱改成小寫后然后直接從我們vue實(shí)例下劃線events這個對象當(dāng)中拿出事件對應(yīng)的方法，如果找不到什么都不做，直接返回回來，找的話，第一步先判斷cbs的長度打不打與1，因?yàn)樗锌赡苁莻€數(shù)組，多個處理函數(shù)如果大于一就變成了一個數(shù)組，如果等于一的話直接返回cbs.

第二步他對arguments做了處理把后面的參數(shù)變成數(shù)組，第一個不要了，因?yàn)槭录Q他用完了，緊接著他對cbs做了個循環(huán)，