vue 的修饰符有 once stop prevent captrue self
- stop 阻止冒泡
- once 只会触发一次点击事件
- prevent 取消默认点击事件
- captrue 捕获阶段触发父级事件
- self 只作用于目标dom事件
案例
image.png
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
<div @click="log(1)">
区域1
<a href="/#a" @click.prevent.self="log(2)">
区域2
<div @click="log(3)">区域3</div>
</a>
</div>
输出3 和1 ， prevent 阻止a标签的跳转， self 阻止了log(2)的执行
<div @click="log(1)">
区域1
<a href="/#a" @click.self.prevent="log(2)">
区域2
<div @click="log(3)">区域3</div>
</a>
</div>
输出3 和1 ， self 阻止了log(2)的执行, self 都不执行了，prevent 就失效了，所以a标签可以跳转。
