講五個事件修飾符 :

• .stop ：阻止冒泡行為
  
• .prevent :組織默認事件，比如a的href
• .self :只有自身才能觸發(fā)此事件，比如由冒泡觸發(fā)的就會阻止
• .capture :捕獲冒泡事件，在觸發(fā)冒泡事件的時候，是由外到內(nèi)的觸發(fā)
• .once :設(shè)置事件只是觸發(fā)一次 ，例如@click.prevent.once僅第一次點擊事件會阻止默認事件的發(fā)生，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("我是爺爺觸發(fā)的事件");}, partentHandle() {console.log("我是父親觸發(fā)的事件"); }, childHandle() { console.log("我是兒子觸發(fā)的事件") } } }) </script>

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

---

阻止冒泡事件：.stop

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

---

.self綁定自身事件

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

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

---

.capture:捕獲冒泡事件

冒泡事件是由內(nèi)而外觸發(fā)，捕獲事件是由外而內(nèi)觸發(fā)，看圖：

點擊 “兒子”

---

.prevent:阻止默認事件

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

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

---

.once:設(shè)置事件只觸發(fā)一次

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。