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
傳給該回調。