前面我们已经知道了两种事件的传递方式（事件冒泡和事件捕获）
这两种方式都会让事件在父子组件中触发（stop同样触发了，只是阻止了），那有没有一种事件可以只针对于某一个元素
答案是有！——那就是self
示例代码
<!DOCTYPE html>
<html lang='zh_cn'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width' , initial-scale='1.0'>
<title>Vue 学习self</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<style>
.div1 {
width: 80px;
height: 80px;
background-color: #aaa;
margin: 5px;
}
.div2{
width: 50px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id='app'>
<div class="div1" @click.self="doParent">
a
<div class="div2" @click="doThis">b</div>
</div>
<div class="div1" @click="doParent">
c
<div class="div2" @click="doThis">d</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
doParent() {
console.log("这是父元素的方法");
},
doThis() {
console.log('这是子元素的方法');
}
},
})
</script>
</body>
</html>
现在这里，我创建了4个div
为方便演示，都设置有背景色
第一个div添加了一个关键词self，下面两个则是没有，我们来看结果
示例结果
我们发现添加了self关键字的在点击子元素b的时候并没有触发到父元素a的方法。
而下面正常的则是事件冒泡
也就是说，添加了self的关键字后，只有点击自身能触发，并不包括其所有的子元素
总结
这为我们了解事件之前的相互传递和关系有了更深一层的理解，在父元素添加关键词self后，所有的子元素都不会冒泡至父元素的事件中去，因为父元素只对自身事件的触发进行响应，而且不包括有在显示中有实际依存关系的子元素