此章節假設你(nǐ)已經看(kàn)過了(le)組件基礎。若你(nǐ)還不了(le)解組件是什(shén)麽，請(qǐng)先閱讀該章節。
觸發與監聽事(shì)件
在組件的模闆表達式中，可以直接使用(yòng) $emit 方法觸發自(zì)定義事(shì)件 (例如：在 v-on 的處理(lǐ)函數中)：
template
<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>
$emit() 方法在組件實例上(shàng)也(yě)同樣以 this.$emit() 的形式可用(yòng)：
js
export default {
methods: {
submit() {
this.$emit('someEvent')
}
}
}
父組件可以通過 v-on (縮寫爲 @) 來(lái)監聽事(shì)件：
template
<MyComponent @some-event="callback" />
同樣，組件的事(shì)件監聽器也(yě)支持 .once 修飾符：
template
<MyComponent @some-event.once="callback" />
像組件與 prop 一樣，事(shì)件的名字也(yě)提供了(le)自(zì)動的格式轉換。注意這(zhè)裏我們觸發了(le)一個以 camelCase 形式命名的事(shì)件，但(dàn)在父組件中可以使用(yòng) kebab-case 形式來(lái)監聽。與 prop 大(dà)小(xiǎo)寫格式一樣，在模闆中我們也(yě)推薦使用(yòng) kebab-case 形式來(lái)編寫監聽器。
TIP
和(hé)原生 DOM 事(shì)件不一樣，組件觸發的事(shì)件沒有冒泡機制。你(nǐ)隻能(néng)監聽直接子組件觸發的事(shì)件。平級組件或是跨越多層嵌套的組件間通信，應使用(yòng)一個外(wài)部的事(shì)件總線，或是使用(yòng)一個全局狀态管理(lǐ)方案。
事(shì)件參數
有時(shí)候我們會(huì)需要在觸發事(shì)件時(shí)附帶一個特定的值。舉例來(lái)說，我們想要 <BlogPost> 組件來(lái)管理(lǐ)文(wén)本會(huì)縮放(fàng)得多大(dà)。在這(zhè)個場景下(xià)，我們可以給 $emit 提供一個額外(wài)的參數：
template
<button @click="$emit('increaseBy', 1)">
Increase by 1
</button>
然後我們在父組件中監聽事(shì)件，我們可以先簡單寫一個内聯的箭頭函數作(zuò)爲監聽器，此函數會(huì)接收到(dào)事(shì)件附帶的參數：
template
<MyButton @increase-by="(n) => count += n" />
或者，也(yě)可以用(yòng)一個組件方法來(lái)作(zuò)爲事(shì)件處理(lǐ)函數：
template
<MyButton @increase-by="increaseCount" />
該方法也(yě)會(huì)接收到(dào)事(shì)件所傳遞的參數：
js
methods: {
increaseCount(n) {
this.count += n
}
}
TIP
所有傳入 $emit() 的額外(wài)參數都會(huì)被直接傳向監聽器。舉例來(lái)說，$emit('foo', 1, 2, 3) 觸發後，監聽器函數将會(huì)收到(dào)這(zhè)三個參數值。
聲明(míng)觸發的事(shì)件
組件可以顯式地通過 emits 選項來(lái)聲明(míng)它要觸發的事(shì)件：
js
export default {
emits: ['inFocus', 'submit']
}
這(zhè)個 emits 選項還支持對(duì)象語法，它允許我們對(duì)觸發事(shì)件的參數進行驗證：
js
export default {
emits: {
submit(payload) {
// 通過返回值爲 `true` 還是爲 `false` 來(lái)判斷
// 驗證是否通過
}
}
}
TypeScript 用(yòng)戶請(qǐng)參考：如何爲組件所抛出的事(shì)件标注類型。
盡管事(shì)件聲明(míng)是可選的，我們還是推薦你(nǐ)完整地聲明(míng)所有要觸發的事(shì)件，以此在代碼中作(zuò)爲文(wén)檔記錄組件的用(yòng)法。同時(shí)，事(shì)件聲明(míng)能(néng)讓 Vue 更好(hǎo)地将事(shì)件和(hé)透傳 attribute 作(zuò)出區(qū)分，從(cóng)而避免一些(xiē)由第三方代碼觸發的自(zì)定義 DOM 事(shì)件所導緻的邊界情況。
TIP
如果一個原生事(shì)件的名字 (例如 click) 被定義在 emits 選項中，則監聽器隻會(huì)監聽組件觸發的 click 事(shì)件而不會(huì)再響應原生的 click 事(shì)件。
事(shì)件校驗
和(hé)對(duì) props 添加類型校驗的方式類似，所有觸發的事(shì)件也(yě)可以使用(yòng)對(duì)象形式來(lái)描述。
要爲事(shì)件添加校驗，那麽事(shì)件可以被賦值爲一個函數，接受的參數就是抛出事(shì)件時(shí)傳入 this.$emit 的内容，返回一個布爾值來(lái)表明(míng)事(shì)件是否合法。
js
export default {
emits: {
// 沒有校驗
click: null,
// 校驗 submit 事(shì)件
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
},
methods: {
submitForm(email, password) {
this.$emit('submit', { email, password })
}
}
}
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發