講五個事件修飾符 :

• .stop ：阻止冒泡行為
  
• .prevent :組織默認事件，比如a的href
• .self :只有自身才能觸發此事件，比如由冒泡觸發的就會阻止
• .capture :捕獲冒泡事件，在觸發冒泡事件的時候，是由外到內的觸發
• .once :設置事件只是觸發一次 ，例如@click.prevent.once僅第一次點擊事件會阻止默認事件的發生，prevent和once的順序無所謂

---

下面分開來演示一下：

先演示一下冒泡事件

<div id="app"> <!-- .stop --> <div class="grandpa flex" @click="grandpaHandle">我是爺爺<div class="partent flex" @click="partentHandle">我是父親<div class="child flex" @click="childHandle">我是兒子</div></div></div> </div> <script>var vm=new Vue ({ el: '#app',data: {}, methods: {grandpaHandle(){ console.log("我是爺爺觸發的事件");}, partentHandle() {console.log("我是父親觸發的事件"); }, childHandle() { console.log("我是兒子觸發的事件") } } }) </script>

結果如下圖所示：當我點擊“我是兒子”的時候，會由內向外觸發其父元素的點擊事件只至根元素，這就是 冒泡事件

---

阻止冒泡事件：.stop

當我們在兒子點擊事件前面加上.stop再點擊“我是兒子”時，就會阻止其向下冒泡，沒有觸發其父元素的冒泡事件

---

.self綁定自身事件

.stop添加在子元素方法 上可以阻止事件的冒泡，子元素事件觸發的同時不會觸發父元素的事件，同時，我們也可以在父元素上操作，這就用到了 .self 修飾符，它是保證只有自身才能觸發，可以避免冒泡事件的影響。

比如：我在“父親”元素的click事件添加 .self 修飾符，點擊“兒子”，就不會觸發父親的click事件了，但是還是會觸發“爺爺”的click事件

---

.capture:捕獲冒泡事件

冒泡事件是由內而外觸發，捕獲事件是由外而內觸發，看圖：

點擊 “兒子”

---

.prevent:阻止默認事件

<a href="https://baidu.com" @click.prevent="aHandle">aaaaaa</a>

prevent修飾符可以使我們在點擊a標簽的時候不跳轉href的鏈接，觸發click事件

---

.once:設置事件只觸發一次

<a href="https://baidu.com" @click.prevent.once="aHandle">aaaaaa</a>

這個時候，當我們第一次點擊a標簽的時候，不會跳轉而只是觸發click事件，但是第二次第三次…點擊a標簽的時候，a的默認事件就不會阻止

寫的有點匆忙了，如果其中有錯誤，感謝指出~晚安

總結

以上是生活随笔為你收集整理的vue事件修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。