阻止事件冒泡的方法
前端结构
<div id="app"><div class="father-box" @click="clickFatherBox">我是父盒子<div class="son-box" @click="clickSonBox">我是子盒子</div></div></div>
methods: {clickSonBox(){alert("子盒子")},clickFatherBox(){alert("父盒子")}},
事件冒泡：clickSonBox事件发生时clickFatherBox事件也被触发了
此时点击子盒子 对话框弹出两次
方法1：使用js阻止事件冒泡
clickSonBox(e){e.stopPropagation();alert("子盒子")},//或者clickSonBox(e){e.cancelBubble=truealert("子盒子")},
方法2：使用事件修饰符stop
绑定事件时，使用stop修饰符阻止事件冒泡
<div class="father-box" @click="clickFatherBox">我是父盒子<div class="son-box" @click.stop="clickSonBox">我是子盒子</div></div>
方法3：使用事件修饰符self
绑定事件时，使用self修饰符 表示只在本元素被点击时触发
<div class="father-box" @click.self="clickFatherBox">我是父盒子<div class="son-box" @click="clickSonBox">我是子盒子</div></div>
注意：
self修饰符应该在父盒子绑定事件时使用而不是子盒子! 在父盒子事件使用self,点击了子盒子，父盒子的点击事件不会被触发，即事件没有冒泡,
self表示只在当前元素发生事件时，事件才触发
