vue中事件修飾符有哪些

Vue 中的事件修飾符允許擴展事件處理函數的功能：.stop：阻止事件冒泡。 .prevent：阻止預設事件行為。 .capture：在捕獲階段偵聽事件。 .self：僅在目標元素為目前元素時觸發事件。 .once：只觸發事件一次並移除偵聽器。 .passive：優化渲染效能，表示不修改 DOM。 .native：觸發原生 DOM 事件。

Vue 中的事件修飾符

Vue 中的事件修飾符允許我們為事件處理函數新增附加功能，使其行為改變。以下是一些最常用的事件修飾符：

• .stop：阻止事件冒泡到父元件。
• .prevent：阻止觸發預設事件行為，例如表單提交或連結導航。
• .capture：在捕捉階段而不是冒泡階段偵聽事件。
• .self：只觸發事件時目標元素為目前元素。
• .once：只觸發事件一次，然後從來源元素移除事件偵聽器。
• .passive：指示事件處理函數不會修改 DOM 或阻止瀏覽器預設行為，進而提高渲染效能。
• .native：在元素上觸發原生 DOM 事件，而不是 Vue 的合成事件。

使用範例：

<code class="vue"><button @click.stop="myMethod">按钮</button></code>

在這個範例中，.stop 修飾符用於阻止按鈕點擊事件冒泡到父組件。

<code class="vue"><form @submit.prevent="myMethod">表单</form></code>

.prevent 修飾符用於阻止表單提交預設行為。

<code class="vue"><div @click.capture="myMethod">容器</div></code>

.capture 修飾符用於在擷取階段偵聽容器中的點擊事件。

要使用多個修飾符，只需將它們連接在一起：

<code class="vue"><a @click.stop.prevent="myMethod">链接</a></code>

這將阻止連結導航，並阻止事件冒泡到父元件。

以上是vue中事件修飾符有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！