在 vue.js 開發(fā)中，處理用戶交互（如點(diǎn)擊、按鍵）是基礎(chǔ)操作。但有時原生事件行為不夠理想。這時，Vue 事件修飾符 就能輕松解決問題，它們像小助手一樣直接加在事件名后面，讓代碼更簡潔高效。以下是主要修飾符及其作用：

.stop - 阻止事件冒泡

問題： 點(diǎn)擊子元素時，事件會像水泡一樣向上“冒”到父元素（事件冒泡），觸發(fā)父元素的同類事件。

解決： 使用 @click.stop 讓事件止步于當(dāng)前元素。

場景： 點(diǎn)擊按鈕關(guān)閉彈窗，不希望觸發(fā)彈窗后面元素的點(diǎn)擊事件。

<div @click="parentClick">
<button @click.stop="childClick">點(diǎn)我</button>
</div>
<!-- 點(diǎn)擊按鈕只會觸發(fā) childClick，不會觸發(fā) parentClick -->

.prevent - 阻止默認(rèn)行為

問題： 某些元素有默認(rèn)行為，如點(diǎn)擊鏈接會跳轉(zhuǎn)頁面，提交表單會刷新頁面。

解決： 使用 @click.prevent 或 @submit.prevent 阻止這些默認(rèn)動作。

場景： 單頁面應(yīng)用(SPA)中阻止鏈接跳轉(zhuǎn)，表單提交前做驗證。

<ahref="/some-page" @click.prevent="handleLinkClick">點(diǎn)鏈接不跳轉(zhuǎn)</a>
<form @submit.prevent="handleSubmit">...</form>

.capture - 使用捕獲模式

問題： 事件默認(rèn)在冒泡階段處理。

解決： 使用 @click.capture 讓事件在捕獲階段（從父到子）就觸發(fā)。

場景： 需要父元素在子元素之前處理事件（較少用）。

<div @click.capture="captureHandler">
<button @click="buttonClick">按鈕</button>
</div>
<!-- 點(diǎn)擊按鈕，先觸發(fā) captureHandler，再觸發(fā) buttonClick -->

.self - 僅當(dāng)事件在自身觸發(fā)

問題： 事件冒泡導(dǎo)致父元素響應(yīng)子元素觸發(fā)的事件。

解決： 使用 @click.self 確保只有點(diǎn)擊元素本身才觸發(fā)，忽略內(nèi)部子元素冒泡上來的事件。

場景： 點(diǎn)擊卡片背景才關(guān)閉卡片，點(diǎn)擊卡片內(nèi)容區(qū)域則不關(guān)閉。

<divclass="card" @click.self="closeCard">
<divclass="card-content">...內(nèi)容區(qū)域...</div>
</div>
<!-- 點(diǎn)擊內(nèi)容區(qū)域不會觸發(fā) closeCard -->

.once - 事件只觸發(fā)一次

問題： 某些操作只需執(zhí)行一次（如支付按鈕防重復(fù)提交）。

解決： 使用 @click.once，事件處理函數(shù)只會執(zhí)行一次。

場景： 防止用戶重復(fù)提交表單，首次點(diǎn)擊后禁用按鈕邏輯。

<button @click.once="payOrder">支付</button>
<!-- "支付"函數(shù)只執(zhí)行一次 -->

.passive - 提升滾動性能

問題： 滾動事件處理函數(shù)中調(diào)用 event.preventDefault() 會阻塞滾動，導(dǎo)致卡頓。

解決： 使用 @scroll.passive 明確告訴瀏覽器不會阻止默認(rèn)滾動行為，瀏覽器可以立即渲染滾動效果。

場景： 需要監(jiān)聽滾動事件做非阻塞操作（如埋點(diǎn)、懶加載）。

<div @scroll.passive="handleScroll">...</div>

鍵盤事件修飾符 (.enter, .esc 等)

問題： 需監(jiān)聽特定按鍵事件。

解決： 使用 @keyup.enter、@keyup.esc、@keyup.space 等，直接響應(yīng)回車、ESC、空格等按鍵。

場景： 在輸入框按回車提交表單。

<input type="text"@keyup.enter="submitForm" />

為什么使用 Vue 事件修飾符？

代碼簡潔： 無需在方法內(nèi)寫 event.stopPropagation() 或 event.preventDefault()。

邏輯清晰： 修飾符直接聲明在模板里，意圖明確。

功能強(qiáng)大： 覆蓋常見事件處理需求（阻止冒泡、阻止默認(rèn)、按鍵過濾等）。

掌握 Vue 事件修飾符的關(guān)鍵點(diǎn)：

修飾符通過點(diǎn)號 . 加在事件名后面（如 @click.stop）。

可以串聯(lián)使用（如 @click.stop.prevent 同時阻止冒泡和默認(rèn)行為）。

鍵盤修飾符支持按鍵別名（.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）或直接使用按鍵 key（如 @keyup.page-down）。

理解并熟練運(yùn)用這些 Vue 事件修飾符，能讓你更高效地處理用戶交互，編寫出更清晰、更易維護(hù)的 Vue 組件代碼。它們是 Vue 模板語法中提升開發(fā)體驗的重要工具。