組件自定義事件(綁定)

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

注意：組件上也可以綁定原生DOM事件，需要使用native修飾符，銷毀組件實例也會銷毀組件對應的自定義事件

下面通過案例說明

1 編寫案例

如圖，我有三個組件，分別是學生，學校和app，由app管理其他兩個組件，這時候想給學校組件一個按鈕，點擊的時候會把學校名稱交給app

2 props實現(xiàn)

通過父組件給子組件傳遞函數(shù)類型的props實現(xiàn)：子給父傳遞數(shù)據(jù)

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

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

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

通過父組件給子組件綁定自定義事件實現(xiàn)：子給父傳遞數(shù)據(jù)

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

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

也是可以完成的

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

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

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

效果都是一樣的

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

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

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

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

6 多個參數(shù)傳遞

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

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

組件自定義事件(解綁)

上面介紹了綁定自定義事件，接下來就是對應的解綁自定義事件

1 解綁一個事件

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

那么多個該如何操作呢？

2 解綁多個事件

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

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

3 解綁全部事件

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

組件的自定義事件總結

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

• 使用場景：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修飾符。

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

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

最新評論