vue中的.capture .self .prevent .stop .once区分，初步理解

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’)

once只执行一次

<div v-on:click.once='alert("1")'></div>
只有在第一次点击时会执行，再次点击不会起作用

prevent 阻止默认程序，比如form表单中的summit提交按钮，会自己提交

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
first_submit
get
<input type="submit" name="">
</form>
prevent，直接不让你提交了，也不跳转，只是执行自己命名的函数，个人觉得这个修饰符使用的并不多
<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
first_submit
get
<input type="submit" name="">
</form>

stop 阻止函数的传递

<div v-on:click='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会，先弹出2，再弹出1

<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，此时的执行结果是，先弹出1，再弹出2（capture的作用）

<div v-on:click.capture.stop='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，此时的执行结果是只会弹出1（capture决定的执行顺序），不会执行alert(‘2’)

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
<div v-on:click.stop="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
123
</div>
</div>

这样就只会弹出2，不会弹出1 了
总之，stop就是你自己执行你的就好了，别去打扰别人。

以上是本人暂时的理解，希望可以帮助到大家，如果有不同见解，可以一起讨论学习！！

最后

以上就是迅速溪流为你收集整理的vue中的.capture .self .prevent .stop .once区分，初步理解的全部内容，希望文章能够帮你解决vue中的.capture .self .prevent .stop .once区分，初步理解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。