Vue3的事件處理和修飾符實(shí)例分析

本文小編為大家詳細(xì)介紹“Vue3的事件處理和修飾符實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue3的事件處理和修飾符實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

基本事件處理

使用v-on指令(簡(jiǎn)稱@)，我們可以監(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ā)出事件的語(yǔ)法是不同的。

在 Options API 中，我們可以簡(jiǎn)單地調(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)的方式來(lái)使用：

export default {   setup (props, { emit }) {     const handleUpdate = () => {       emit('update', 'Hello World')     }      return { handleUpdate }   }  }

完美!

無(wú)論我們使用Options 還是 Composition API，父組監(jiān)聽的方式都是一樣的。

<HelloWorld @update='inputUpdated'/>

首先，我們可以在模板中使用$ event訪問傳遞的值。

如果在組件 emit 出去方法有傳遞值，我們可以通過兩種不同的方式捕獲它，這取決于我們是使用內(nèi)聯(lián)還是使用方法。

第一種是在模板中使用$event訪問傳遞的值。

<HelloWorld @update='inputUpdated($event)'/>

第二，使用方法來(lái)處理事件，則傳遞的值將作為第一個(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)事件修飾符來(lái)限制哪個(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' />

通常，我們想檢測(cè)某個(gè)鍵上的這些事件，有兩種方法可以執(zhí)行此操作。

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. keycodes

3. 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)修飾符。

1. shift

2. alt

3. ctrl

4. 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事件，我們可以使用一些修飾符來(lái)更改其運(yùn)行方式。無(wú)論是停止傳播還是阻止默認(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'>

讀到這里，這篇“Vue3的事件處理和修飾符實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。