組件自定義事件(綁定)

像click,change這些都是js的內(nèi)置事件，我們可以直接使用，本次我們學(xué)習(xí)自己根據(jù)需求打造全新的事件，但是js內(nèi)置的是給html元素用的,本次的自定義事件是給組件用的

注意：組件上也可以綁定原生DOM事件，需要使用native修飾符，銷毀組件實(shí)例也會(huì)銷毀組件對(duì)應(yīng)的自定義事件

下面通過(guò)案例說(shuō)明

1 編寫案例

如圖，我有三個(gè)組件，分別是學(xué)生，學(xué)校和app，由app管理其他兩個(gè)組件，這時(shí)候想給學(xué)校組件一個(gè)按鈕，點(diǎn)擊的時(shí)候會(huì)把學(xué)校名稱交給app

2 props實(shí)現(xiàn)

通過(guò)父組件給子組件傳遞函數(shù)類型的props實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù)

我們可以子組件使用props給父組件傳遞，所以首先在app里面定義函數(shù),然后通過(guò)props進(jìn)行傳遞使用

3 自定義事件實(shí)現(xiàn)方式1

如果我還想繼續(xù)給student一個(gè)按鈕，點(diǎn)擊的時(shí)候把學(xué)生姓名給app組件呢？這次不用props了，使用自定義事件實(shí)現(xiàn)

通過(guò)父組件給子組件綁定自定義事件實(shí)現(xiàn)：子給父?jìng)鬟f數(shù)據(jù)

使用$emit觸發(fā)組件身上的自定義事件，參數(shù)是事件名稱

當(dāng)然，使用@簡(jiǎn)寫形式替代v-on也是可以的，我這里沒有簡(jiǎn)寫，事件名稱和回調(diào)名稱可以相同的

也是可以完成的

4 自定義事件實(shí)現(xiàn)方式2

除了上述的方式，還有另外一種方式可以實(shí)現(xiàn)，使用ref，寫一個(gè)加載鉤子函數(shù)，使用$on

這種寫法雖然麻煩，需要寫鉤子函數(shù)，但是它也更加的靈活

效果都是一樣的

如果驗(yàn)證它更加的靈活呢?比如現(xiàn)在有這樣的一個(gè)需求，需要3秒后才能加載事件，這時(shí)候使用第一種寫法就寫不了，但是第二種寫法就可以

5 只能觸發(fā)一次事件

有的場(chǎng)景，我想要自定義事件觸發(fā)一次后就不再觸發(fā)了，這時(shí)候就不能使用??這個(gè)???了，應(yīng)該使用on這個(gè)api了，應(yīng)該使用once

如果不是這種寫法呢？也是一樣的道理，在事件名稱后.once即可

6 多個(gè)參數(shù)傳遞

自定義事件也是可以支持傳遞多個(gè)參數(shù)的，使用逗號(hào)拼接即可

但是一般多個(gè)參數(shù)不會(huì)這么寫，而是使用es6里面的...params接收,他會(huì)把多個(gè)參數(shù)拼接成一個(gè)數(shù)組

組件自定義事件(解綁)

上面介紹了綁定自定義事件，接下來(lái)就是對(duì)應(yīng)的解綁自定義事件

1 解綁一個(gè)事件

使用$off解綁，參數(shù)就是事件名稱，這種寫法只支持解綁一個(gè)事件

那么多個(gè)該如何操作呢？

2 解綁多個(gè)事件

比如現(xiàn)在有兩個(gè)自定義事件

使用$off解綁，參數(shù)是一個(gè)數(shù)組，里面是參數(shù)名稱

3 解綁全部事件

還有一種更加暴力的寫法，使用off方法什么也不傳，這便是解綁全部事件

組件的自定義事件總結(jié)

• 一種組件間通信的方式，適用于：子組件 ===> 父組件

• 使用場(chǎng)景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B綁定自定義事件（事件的回調(diào)在A中）。

• 綁定自定義事件：

• 第一種方式，在父組件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

• 第二種方式，在父組件中：

<Demo ref="demo"/>

......

mounted(){

this.$refs.xxx.$on('atguigu',this.test)

}

• 若想讓自定義事件只能觸發(fā)一次，可以使用once修飾符，或$once方法。

• 觸發(fā)自定義事件：this.$emit('atguigu',數(shù)據(jù))

• 解綁自定義事件this.$off('atguigu')

• 組件上也可以綁定原生DOM事件，需要使用native修飾符。

• 注意：通過(guò)this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時(shí)，回調(diào)要么配置在methods中，要么用箭頭函數(shù)，否則this指向會(huì)出問題！

以上就是一文詳解Vue-組件自定義事件(綁定和解綁)的詳細(xì)內(nèi)容，更多關(guān)于Vue 組件自定義的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論