默認冒泡
默認情況下坚踩，js的事件會向上冒泡荡灾，如：以下三個div元素：
<div class="grandfather" @click="catchGrandfather">
<div class="father" @click="catchFather">
<div class="son" @click="catchSon"></div>
</div>
</div>
當我們點擊里層的div，會觸發(fā)外層的div事件
let vm = new Vue({
el: "#app",
data: {
},
methods: {
catchSon() {
console.log('我還小瞬铸，別抓我啊...');
},
catchFather() {
console.log('我上有老批幌，下有小，各位官爺嗓节，手下留情啊...');
},
catchGrandfather() {
console.log('你們這些兔崽子荧缘，敢動我這把老骨頭試下!');
}
}
})
冒泡.gif
事件修飾符
vue提供了事件修飾符，可以修改默認的事件觸發(fā)機制：
.stop 阻止冒泡
.prevent 阻止默認事件
.capture 添加事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調
.once 事件只觸發(fā)一次
以 .stop 為例：
<div class="grandfather" @click="catchGrandfather">
<div class="father" @click="catchFather">
<!-- 阻止此元素向上冒泡 -->
<div class="son" @click.stop="catchSon"></div>
</div>
</div>
阻止冒泡.gif
