vue 父子傳值中的this.$emit和兄弟傳值vue.$emit 的區別


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM