capture和self主要是函数执行顺序的问题
.capture先执行父级的函数,再执行子级的触发函数(一般用法),
即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
<div v-on:click.capture='alert("1")' style="width: 100%;height: 45px;background-color: black;">
<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
123
</div>
</div>
此时点击子级的div时,会先执行alert(‘1’),再执行alert(‘2’)
self是只执行子级本身的函数
<div v-on:click.self='alert("1")' style="width: 100%;height: 45px;background-color: black;">
<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
123
</div>
</div>
此时点击子级的div会执行alert(‘2’),不会执行alert(‘1’)
以上是本人暂时的理解,希望可以帮助到大家,如果有不同见解,可以一起讨论学习!!