引言

其实我们在平时总会用到一些方法去处理我们的事件函数，比如阻止事件的默认行为 、阻止事件冒泡等等。那在Vue.js中，对这些操作进行了一个很简易的处理，那就是在我们绑定的事件后面加一个事件修饰符，这样能让我们一眼就能看出，该组件绑定了什么事件 、对事件做了什么处理，好了，我们来了解一下吧。

正文

在本文我就不详细介绍Vue.js是如何给组件绑定事件了的，大家都知道是通过v-on:事件="事件名" 或者它的语法糖 @事件="事件名"。

Vue.js为我们提供了很多不同种类的修饰符，例如事件修饰符 、按键修饰符 、鼠标按键修饰符，我们就对这三种修饰符进行详细的介绍。

首先，来看一下Vue.js为我们提供的事件修饰符有哪些吧。

.stop

未使用修饰符 .stop 的情况：

<template>
 <div class='father' @click='btnClick1'>
  <div class='child' @click='btnClick2'>
   <div class='grandson' @click='btnClick3'>div>
  div>
 div>
template>
<script>
 ...
 btnClick1() {
  console.log('div1被点击')
 },
 btnClick2() {
  console.log('div2被点击')
 },
 btnClick3() {
  console.log('div3被点击')
 }
 ...
script>

当我们点击类名为grandson的div标签时，会打印以下内容

div1被点击         
div2被点击         
div3被点击   

我们再来看一下使用了修饰符 .stop 是什么样子的：

<template>
 <div class='father' @click='btnClick1'>
  <div class='child' @click.stop='btnClick2'>
   <div class='grandson' @click='btnClick3'>div>
  div>
 div>
template>
<script>
 ...
 btnClick1() {
  console.log('div1被点击')
 },
 btnClick2() {
  console.log('div2被点击')
 },
 btnClick3() {
  console.log('div3被点击')
 }
 ...
script>

这时我们进行同样的操作，打印结果如下：

div1被点击         
div2被点击         

类名为father的div标签上的click事件并没有被触发，其实是因为修饰符.stop 相当于 stopPropagation()的作用，阻止了事件继续向上传递

.prevent

该修饰符就不多做掩饰了，相当于 preventDefault() 的作用

.capture

该修饰符是将事件触发顺序提前，来继续看上面那个例子，我们用了该修饰符后，是怎么样一个情况

<template>
 <div class='father' @click.capture='btnClick1'>
  <div class='child' @click='btnClick2'>
   <div class='grandson' @click='btnClick3'>div>
  div>
 div>
template>
<script>
 ...
 btnClick1() {
  console.log('div1被点击')
 },
 btnClick2() {
  console.log('div2被点击')
 },
 btnClick3() {
  console.log('div3被点击')
 }
 ...
script>

我们点击最中间的元素，看看结果如何：

div1被点击
div3被点击
div2被点击

我们可以看到，最外层的div使用了修饰符 .capture ，所以当我们点击最里面的div时，本应该由内向外依次触发事件，但此时却先触发了最外层的div的事件，然后再按原本的顺序依次触发

.self

该修饰符根据字面意思也很好理解，就是只有当自身触发该事件才会调用处理的函数，我们来接着上面的例子来看