vue @cliick.stop @click.prevent @click.self

@click.stop

功能：阻止子节点的冒泡。
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。
所以@click.stop的作用是阻止子节点触发事件时通知它的祖先元素。
以下例展示：

<script>
export default {
  name: "app",
  data() {
    return { }
  },
 	methods:{
     click1(){
           alert('div事件')
     },
     click2(){
          alert('div内a标签的事件')
     },
  }
}
</script>
<template>
  <button  @click="click1()" style="width:40px;height:41px">
 		<button @click.stop="click2()" style="width:20px;height:20px"></button>
	</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

当我们点击最内部的那个button时，我们只执行了click2()；如果把@click.stop删去，我们在点击最内部那个button时，还会执行click1()。

@click.prevent

功能：阻止事件的默认行为。
如下例，@click.prevent阻止了链接标签默认跳转事件，而执行我们自定义的点击click()方法。

<script>
export default {
  name: "app",
  data(){},
  methods:{
    click(){
      alert('按钮被点击')
    },
  }
}
</script>
<template>
  <div id="app6">
  	<a type="button" href="http://www.baidu.com" target="_blank" 
  	@click.prevent="click()">点我</a >
	</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@click.self

功能：只当在 event.target 是当前元素自身时触发处理函数
简言之：加了self的点击方法只有自己可以触发，子节点点击之后无法触发；没加self的点击方法 子节点点击之后，也会因为冒泡而触发。
如下例：
由于我们加了@click.self，当我们电子最内部的div时，最外层的div的点击事件不会触发。

<script>
export default {
  name: "app",
  data(){
  },
  methods:{
    click1(){
      alert('box1被点击')
    },
    click2(){
      alert('box2被点击')
    },
  }
}
</script>
<template>
  <div @click.self="click1()" style="width:40px;height:40px;background-color:red">
    <div @click.self="click2()" style="width:20px;height:20px;background-color:pink">
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@click.prevent.self 和 @click.self.prevent

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的
@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。