vue中的事件修飾符有哪些及如何使用

這篇“vue中的事件修飾符有哪些及如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中的事件修飾符有哪些及如何使用”文章吧。

1. 官方文檔

vue2中有關 v-on 的介紹

vue3中有關 v-on 的介紹

初步看下來，vue2 和 Vue3 中修飾符差距并不大。

2. 說明+實例

2.1 .stop

.stop 修飾符的作用是阻止冒泡

<template>
  <div @click="handleClick(2)">
    <button @click.stop="handleClick(1)">點擊</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

js 中事件默認是由內向外層冒泡傳遞的。正常情況下點擊按鈕會依次打印 1,2。當我們并不想觸發外層的事件時，我們可以用 .stop 阻止冒泡。

對應源碼使用的是 $event.stopPropagation() 實現此功能

2.2 .prevent

.prevent 修飾符的作用是阻止默認事件

<template>
  <div>
    <a href="#" rel="external nofollow"  @click.prevent="handleClick(1)">點我</a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

html 某些元素自帶一些默認的事件，例如常見的:from 表單的提交；a 標簽的跳轉；如果想禁用這些時間，就可以使用 .prevent 修飾符。

對應源碼使用的是 event.preventDefault() 實現此功能

2.3 .capture

事件默認是由里往外冒泡，.capture 修飾符的作用是,由外部向內進行捕獲

<template>
  <div @click.capture="handleClick(2)">
    <button @click="handleClick(1)">點擊</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(key) {
      console.log('你好', key);
    },
  },
};
</script>

此處會先打印 2,再打印 1。

對應 js 原生中修改事件是，冒泡還是捕獲，dom.addEventListener(eventName,fn,capture)。第三個參數默認是 false，及冒泡。如果為 true，及捕獲。capture 英譯 ：捕獲。

2.4 {keyCode | keyAlias}

當需要對鍵盤按鈕做處理的時候，比如 keydown, keyup。如果想針對特定的某些按鈕進行監聽，可以添加修飾符，例如：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

常見的按鍵碼 官方文檔對按鍵碼的介紹

2.5 .native

.native 修飾符是加在自定義組件的事件上，保證事件能執行.

// 執行不了
<My-component @click="shout(3)"></My-component>

// 可以執行
<My-component @click.native="shout(3)"></My-component>

2.6 .once

.once修飾符的作用是，事件只執行一次

<button  @click.once="handleClick($event)">
  按鈕
</button>

2.7 .left .right .middle

.left .middle .right 這三個修飾符分別是鼠標的左中右按鍵觸發的事件

2.8 .passive

當我們在監聽元素滾動事件的時候，會一直觸發 onscroll 事件，在 pc 端是沒啥問題的，但是在移動端，會讓我們的網頁變卡，因此我們使用這個修飾符的時候，相當于給對移動端的滾動做一些優化。

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

以上就是關于“vue中的事件修飾符有哪些及如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。