寫文章不容易，點個讚唄兄弟
專注 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工作原理，源碼版助於瞭解內部詳情，讓我們一起學習吧
研究基於 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公衆號也可以吧
Vue 事件是我最感興趣的東西之一，一直想研究玩玩
特別是組件自定義事件，很想知道，給子組件綁定自定義事件，子組件是怎麼觸發的 巴拉巴拉的
開始正文了
在 Vue 中，事件大概分爲 4 種
1、自定義事件
2、DOM 事件
3、組件DOM 事件
4、組件自定義事件
然後再細分，就只有兩種
1、自定義事件
2、DOM 事件
下面就來粗略說一下事件
自定義事件
自定義事件 是使用觀察者模式建立起來的一種事件機制
分爲 個人使用 和 組件使用
自定義事件主要由下面兩部分構成
1、有事件存儲器
2、綁定事件，觸發事件，解綁事件三個函數
在 Vue 中，每個實例都會添加一個屬性_events，用來存放本實例上註冊的自定義事件
_events 就是 事件存儲器，是一個對象
屬性名是 事件名，屬性值是事件回調
個人調用自定義事件
我也經常在項目中使用到 自定義事件，像下面這樣
沒錯，$on 就是註冊事件，$emit 是 觸發事件，$off 就是 解綁事件
在哪個實例上註冊的事件，事件就屬於哪個實例，正常情況下，你是不可能能觸發別的實例上的事件的
而給組件綁定自定義事件 是怎麼樣的呢？
結果也是一樣的，前面的解析處理可以不管，最後同樣是使用內置的 $on 方法去註冊事件
而這個事件依然是屬於子組件的，存放在 子組件的 _events 中
所以你可以在子組件中，使用 this.$emit 觸發這個事件
DOM 事件
DOM 事件，最後就是直接給 DOM 綁定事件
使用 addEventListeners 綁定事件，沒有做任何兼容處理，灰常簡單
綁定事件，是在DOM 創建之後，插入頁面之前
1、普通標籤綁定事件
很簡單，普通 addEventListener 綁定DOM事件就完事了
事件會被保存在這個節點解析成的 vnode 中，就是 vm._vnode
2、組件綁定DOM 事件
如果要給組件綁定原生DOM 事件，需要加上 native 這個修飾器
組件綁定的DOM 事件，在父實例解析完畢開始掛載時，遇到子元素是組件，然後去解析組件內部並生成DOM之後才 addEventListener 綁定
綁定的原生事件，會被存放在組件的外殼節點上 vm.$vnode
還有，你可能會想，如果這樣綁定DOM事件會怎麼樣？
問得好，這樣並不會綁定DOM事件，而是給組件綁定自定義事件，最後是會存在 子組件的 _events 中的，並不會綁定DOM事件
然後可以在子組件中用 this.$emit("click") 去觸發這個父組件綁定的這個click
