Vue事件修飾符詳解

Jacob98發表於2019-07-30
Vue事件

整體學習Vue時看到Vue文件中有事件修飾符的描述，但是看了之後並沒有理解是什麼意思，於是查閱了資料，現在記錄下來與大家分享

先給大家畫一個示意圖理解一下冒泡和捕獲

1564415635638

(1) .stop修飾符

請看如下程式碼

<template>
  <div class="about">
    <div @click="test1">
      <div @click="test2">
        測試
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    test1(){
      console.log('test1')
    },
    test2(){
      console.log('test2')
    }
  }
}
</script>

由以上程式碼可以看到我們有一個巢狀的div，每一個div都繫結著一個事件，如果我們點選div的話是按什麼順序觸發這兩個事件的呢。其實是預設按照冒泡的方式觸發的，簡單來說就是由內而外，如果還是不明白請看上面的解析圖。

此Vue檔案最終生成的介面是這個樣子的

1564415745516

當我們點選的時候預設按照冒泡方式觸發函式，控制檯列印結果如下

1564415856979

現在就是.stop發揮作用的時候了，修改程式碼如下

<template>
  <div class="about">
    <div @click="test1">
      <div @click.stop="test2">
        測試
      </div>
    </div>
  </div>
</template>

這樣我們在點選之後控制檯列印結果如下

1564415967890

由這個結果我們可以看到，這個修飾符的作用就是阻止事件冒泡，不讓他向外去執行函式，到此為止

(2).prevent修飾符

這個時候我們再來說一下.prevent修飾符，其作用就是阻止元件本來應該發生的事件，轉而去執行自己定義的事件

<template>
  <div class="about">
    <a href="https://www.cnblogs.com/Jacob98/" @click="test2">跳轉</a>
  </div>
</template>

<script>
export default {
  methods:{
    test2(){
      console.log('test2')
    }
  }
}
</script>

上述程式碼我們並沒有新增.prevent修飾符，接下來的結果我們應該可以想到，點選之後會跳轉到我寫的網址中(也就是我的部落格?)，當時當我們對這個程式碼稍作修改

<template>
  <div class="about">
    <a href="https://www.cnblogs.com/Jacob98/" @click.prevent="test2">跳轉</a>
  </div>
</template>

點選之後就不會跳轉到相應的網址，而是去執行我寫的函式

(3).capture修飾符

其實這個的理解就很簡單，就想我們第一節所說，網頁是預設按照冒泡方式去觸發函式的，但是當我們使用.capture修飾符時，網頁就會按照捕獲的方式觸發函式，也就是從外向內執行，但是這個時候一定要注意，.capture修飾符一定要寫在外層才能生效，原因大家應該能自己想清楚。

<template>
  <div class="about">
    <div @click.capture="test1">
      <div @click.stop="test2">
        測試
      </div>
    </div>
  </div>
</template>

控制檯列印結果如下

1564416984007

(4).once修飾符

這個理解起來就更加簡單了，加上此修飾符之後相應的函式只能觸發一次，無論你點選多少下，函式就只觸發一次。這個有一個用途就是防止使用者多次點選造成應用資料錯誤。比如說使用者點選支付按鈕，由於客戶機器比較卡頓，點選一下之後沒有立即反應就又點了一下，這個時候有可能就會造成多次扣費，降低使用者體驗。

(5).self修飾符

當前元素自身時觸發處理函式時才會觸發函式，原理：是根據event.target確定是否當前元素本身，來決定是否觸發的事件/函式
例項：如果點選內部點選2，冒泡不會執行gett方法，因為event.target指的是內部點選2的dom元素，不是外部點選1的，所以不會觸發自己的點選事件

<div v-on:click.self="test1">
    test1
    <div v-on:click="test2">
        test2
    </div>
</div>

1564417031353

相關文章