一些關(guān)于Vue3中事件相關(guān)的小技巧，你可能還不知道
在本文中，會(huì)介紹基礎(chǔ)知識(shí)，并提供一些用于處理事件的代碼示例。它僅包含我認(rèn)為最有用的技巧/方法，要深入了解Vue可以做的所有事情，請(qǐng)查看Vue文檔。
基本事件處理
使用v-on指令(簡稱@)，我們可以監(jiān)聽DOM事件并運(yùn)行處理程序方法或內(nèi)聯(lián)Javascript。
// v-on 指令
<div v-on:click='handleClick' />
// OR
<div @click='handleClick' />
向父組件發(fā)出自定義事件
任何Web框架中的常見用例都是希望子組件能夠向其父組件發(fā)出事件，這也是雙向數(shù)據(jù)綁定原理。
常見一個(gè)示例是將數(shù)據(jù)從 input組件發(fā)送到父表單。
根據(jù)我們使用的是Options API還是Composition API，發(fā)出事件的語法是不同的。
在 Options API 中，我們可以簡單地調(diào)用this.$emit(eventName, payload),示例如下：
export default {
methods: {
handleUpdate: () => {
this.$emit('update', 'Hello World')
}
}
}
但是，Composition API 使用方式與此不同。需要在 Vue3 提供的 setup方法使用emit方法。
只要導(dǎo)入context對(duì)象，就可以使用與Options API相同的參數(shù)調(diào)用emit。
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}
當(dāng)然，我在項(xiàng)目中經(jīng)常使用解構(gòu)的方式來使用：
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}
完美！
無論我們使用Options 還是 Composition API，父組監(jiān)聽的方式都是一樣的。
<HelloWorld @update='inputUpdated'/>
首先，我們可以在模板中使用$ event訪問傳遞的值。
如果在組件 emit 出去方法有傳遞值，我們可以通過兩種不同的方式捕獲它，這取決于我們是使用內(nèi)聯(lián)還是使用方法。
第一種是在模板中使用$event訪問傳遞的值。
<HelloWorld @update='inputUpdated($event)'/>
第二，使用方法來處理事件，則傳遞的值將作為第一個(gè)參數(shù)自動(dòng)傳遞給我們的方法。
<HelloWorld @update='inputUpdated'/>
// ...
methods: {
inputUpdated: (value) => {
console.log(value) // WORKS TOO
}
}
鼠標(biāo)修飾符
下面是我們可以在v-on指令中捕獲的主要DOM鼠標(biāo)事件列表：
<div
@mousedown='handleEvent'
@mouseup='handleEvent'
@click='handleEvent'
@dblclick='handleEvent'
@mousemove='handleEvent'
@mouseover='handleEvent'
@mousewheel='handleEvent'
@mouseout='handleEvent'
>
Interact with Me!
</div>
對(duì)于單擊事件，我們還可以添加鼠標(biāo)事件修飾符來限制哪個(gè)鼠標(biāo)按鈕將觸發(fā)我們的事件。有三個(gè): left，right 和 middle。
<!-- 這只會(huì)觸發(fā)鼠標(biāo)左鍵 -->
<div @mousedown.left='handleLeftClick'> Left </div>
鍵盤修飾符
我們可以聽三個(gè)DOM鍵盤事件：
<input
type='text'
placeholder='Type something'
@keypress='handleKeyPressed'
@keydown='handleKeyDown'
@keyup='handleKeyUp'
/>
通常，我們想檢測某個(gè)鍵上的這些事件，有兩種方法可以執(zhí)行此操作。
keycodes Vue具有某些鍵的別名（ enter,tab,delete,esc,space,up,down,left,right)
<!-- Trigger even when enter is released -->
<input
type='text'
placeholder='Type something'
@keyup.enter='handleEnter'
/>
<!-- OR -->
<input
type='text'
placeholder='Type something'
@keyup.13='handleEnter'
/>
系統(tǒng)修飾符
對(duì)于某些項(xiàng)目，我們可能只想在用戶按下修飾鍵的情況下觸發(fā)事件。修飾鍵類似于Command或shift。
在Vue中，有四個(gè)系統(tǒng)修飾符。
shift alt ctrl meta (在mac上是CMD，在Windows上是Windows鍵)
這對(duì)于在Vue應(yīng)用程序中創(chuàng)建諸如自定義鍵盤快捷鍵之類的功能非常有用。
<!-- 自定義快捷方式，楊使用Shift + 8 創(chuàng)建列表 -->
<input
type='text'
placeholder='Type something'
@keyup.shift.56='createList'
/>
在Vue文檔中，還有一個(gè)exact的修飾符，以確保僅在按下我們指定的鍵且沒有其他鍵的情況下才觸發(fā)事件。
<!-- 自定義快捷方式，只有Shift + 8 這兩個(gè)按下時(shí)才會(huì)創(chuàng)建列表-->
<input
type='text'
placeholder='Type something'
@keyup.shift.56.exact='createList'
/>
事件修飾符
對(duì)于所有DOM事件，我們可以使用一些修飾符來更改其運(yùn)行方式。無論是停止傳播還是阻止默認(rèn)操作，Vue都有兩個(gè)內(nèi)置的DOM事件修飾符。
<!-- 阻止默認(rèn)行為 -->
<form @submit.prevent>
<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>
<!-- 阻止默認(rèn)行為和冒泡 -->
<form @submit.stop.prevent='submitForm'>
<!-- 防止事件被多次觸發(fā) -->
<div @close.once='handleClose'>