成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【Vue原理】Event - 白話版

kumfo / 1842人閱讀

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

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

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Event - 白話版

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

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

開(kāi)始正文了

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

1、自定義事件

2、DOM 事件

3、組件DOM 事件

4、組件自定義事件

然后再細(xì)分，就只有兩種

1、自定義事件

2、DOM 事件

下面就來(lái)粗略說(shuō)一下事件

自定義事件

自定義事件 是使用觀察者模式建立起來(lái)的一種事件機(jī)制

分為 個(gè)人使用 和 組件使用

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

1、有事件存儲(chǔ)器

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

在 Vue 中，每個(gè)實(shí)例都會(huì)添加一個(gè)屬性_events，用來(lái)存放本實(shí)例上注冊(cè)的自定義事件

_events 就是 事件存儲(chǔ)器，是一個(gè)對(duì)象

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

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

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

沒(méi)錯(cuò)，$on 就是注冊(cè)事件，$emit 是 觸發(fā)事件，$off 就是 解綁事件

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

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

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

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

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

DOM 事件

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

使用 addEventListeners 綁定事件，沒(méi)有做任何兼容處理，灰常簡(jiǎn)單

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

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

很簡(jiǎn)單，普通 addEventListener 綁定DOM事件就完事了

事件會(huì)被保存在這個(gè)節(jié)點(diǎn)解析成的 vnode 中，就是 vm._vnode

2、組件綁定DOM 事件

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105488.html

相關(guān)文章

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

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

    amuqiao 評(píng)論0 收藏0

  • 【Vue原理】VModel - 白話版

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

    keke 評(píng)論0 收藏0

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

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

    phoenixsky 評(píng)論0 收藏0

  • 【Vue原理】NextTick - 白話版

    摘要：通常會(huì)做很多判斷來(lái)選擇存在的類型，比如判斷等是否存在，而選擇他為微任務(wù)類型但是可能宏微任務(wù)最后都是，因?yàn)樗潜Ｊ丶嫒萏幚怼? 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【V...

    zeyu 評(píng)論0 收藏0

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

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

    yunhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<