vue事件修饰符

讲五个事件修饰符 :

• .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的默认事件就不会阻止

写的有点匆忙了，如果其中有错误，感谢指出~晚安