Vue里面的事件修饰符,可以阻止冒泡行为,和一些默认行为等等,让我们看看具体是怎么使用的。
.stop(阻止冒泡)
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
.prevent(阻止默认行为)
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
上面这一行代码并没有跳转到百度,因为.prevent 阻止了a标签的默认行为
.capture(实现捕获触发事件的机制)
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
.self(实现只有点击当前元素时候,才会触发事件处理函数)
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
.once(实现支触发一次事件处理函数)
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
.stop 和.self 的区别
.self 指挥阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡行为