1、首先了解一下 $emit 方法
vm.$emit( eventName, […args] )
-
參數:
{string} eventName[...args]
觸發當前實例上的事件。附加參數都會傳給監聽器回調。
這里寫的$emit 觸發當前實例上的事件(vue不是單頁面應用,只有一個實例嗎,組件頁面也是vue實例嗎?)
這里嘗試打印了new Vue 實例和 組件中打印的 this(指向當前實例)
2、new Vue 實例打印

打印結果如下:我們看到這個

3、組件實例打印:

4、父子傳值中的this.$emit和兄弟傳值vue.$emit 的區別
父子傳值中的this.$emit :觸發當前實例上的事件(當前實例是vueComponent)附加參數都會傳給監聽器回調。
兄弟傳值vue.$emit:觸發當前實例上的事件(當前實例是vue)附加參數都會傳給監聽器回調。
5、$emit 和 $on 實現原理
(1)當我們調用$on 方法監聽 aa 事件時,會在當前實例上的 _events 屬性上添加該方法

(2)或者我們在子組件上綁定自定義事件時,也會添加到當前實例的 _events 屬性中
<child @aa='aa'></child> // 在child實例的 _events 屬性上添加 aa 方法
當前實例上的 _events 屬性上添加“aa”方法

(3)調用當前實例原型上的$emit ,就會去當前實例對象的屬性上 _events 中查找

(4)$emit 和 $on 實現原理

圖片來源於博客:https://blog.csdn.net/qq_42942961/article/details/117850607
(5)$emit 源碼

圖片來源:https://blog.csdn.net/leelxp/article/details/107212667
源碼解析:
根據傳入的事件名從當前實例的_events屬性(即事件中心)中獲取到該事件名所對應的回調函數cbs,然后再獲取傳入的附加參數args,由於cbs是一個數組,所以遍歷該數組,拿到每一個回調函數,執行回調函數並將附加參數args傳給該回調。
