国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue原理】Event - 白話版

kumfo / 1774人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理白話版事件是我最感興趣的東西之

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧

【Vue原理】Event - 白話版

Vue 事件是我最感興趣的東西之一，一直想研究玩玩

特別是組件自定義事件，很想知道，給子組件綁定自定義事件，子組件是怎么觸發(fā)的 巴拉巴拉的

開始正文了

在 Vue 中，事件大概分為 4 種

1、自定義事件

2、DOM 事件

3、組件DOM 事件

4、組件自定義事件

然后再細分，就只有兩種

1、自定義事件

2、DOM 事件

下面就來粗略說一下事件

自定義事件

自定義事件 是使用觀察者模式建立起來的一種事件機制

分為 個人使用 和 組件使用

自定義事件主要由下面兩部分構(gòu)成

1、有事件存儲器

2、綁定事件，觸發(fā)事件，解綁事件三個函數(shù)

在 Vue 中，每個實例都會添加一個屬性_events，用來存放本實例上注冊的自定義事件

_events 就是 事件存儲器，是一個對象

屬性名是 事件名，屬性值是事件回調(diào)

個人調(diào)用自定義事件

我也經(jīng)常在項目中使用到 自定義事件，像下面這樣

沒錯，$on 就是注冊事件，$emit 是 觸發(fā)事件，$off 就是 解綁事件

在哪個實例上注冊的事件，事件就屬于哪個實例，正常情況下，你是不可能能觸發(fā)別的實例上的事件的

而給組件綁定自定義事件 是怎么樣的呢？

結(jié)果也是一樣的，前面的解析處理可以不管，最后同樣是使用內(nèi)置的 $on 方法去注冊事件

而這個事件依然是屬于子組件的，存放在 子組件的 _events 中

所以你可以在子組件中，使用 this.$emit 觸發(fā)這個事件

DOM 事件

DOM 事件，最后就是直接給 DOM 綁定事件

使用 addEventListeners 綁定事件，沒有做任何兼容處理，灰常簡單

綁定事件，是在DOM 創(chuàng)建之后，插入頁面之前

1、普通標(biāo)簽綁定事件

很簡單，普通 addEventListener 綁定DOM事件就完事了

事件會被保存在這個節(jié)點解析成的 vnode 中，就是 vm._vnode

2、組件綁定DOM 事件

如果要給組件綁定原生DOM 事件，需要加上 native 這個修飾器

組件綁定的DOM 事件，在父實例解析完畢開始掛載時，遇到子元素是組件，然后去解析組件內(nèi)部并生成DOM之后才 addEventListener 綁定

綁定的原生事件，會被存放在組件的外殼節(jié)點上 vm.$vnode

還有，你可能會想，如果這樣綁定DOM事件會怎么樣？

問得好，這樣并不會綁定DOM事件，而是給組件綁定自定義事件，最后是會存在 子組件的 _events 中的，并不會綁定DOM事件

然后可以在子組件中用 this.$emit("click") 去觸發(fā)這個父組件綁定的這個click

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105488.html

相關(guān)文章

  • 【Vue原理】Event - 源碼版 之 綁定組件自定義事件

    摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定組件自定義事件組件 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    amuqiao 評論0 收藏0

  • 【Vue原理】VModel - 白話版

    摘要：執(zhí)行的時候，會綁定上下文對象為組件實例于是中的就能取到組件實例本身，的代碼塊頂層作用域就綁定為了組件實例于是內(nèi)部變量的訪問，就會首先訪問到組件實例上。其中的獲取，就會先從組件實例上獲取，相當(dāng)于。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得...

    keke 評論0 收藏0

  • 【Vue原理】Event - 源碼版 之 綁定標(biāo)簽DOM事件

    摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之綁定標(biāo)簽事件這里的綁定 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    phoenixsky 評論0 收藏0

  • 【Vue原理】NextTick - 白話版

    摘要：通常會做很多判斷來選擇存在的類型，比如判斷等是否存在，而選擇他為微任務(wù)類型但是可能宏微任務(wù)最后都是，因為他是保守兼容處理。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【V...

    zeyu 評論0 收藏0

  • 【Vue原理】Event - 源碼版 之 自定義事件

    摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關(guān)注公眾號也可以吧原理源碼版之自定義事件的自定義事件 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    yunhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<