vue事件修饰符
.stop
.prevent
.capture
.self
.once
1 .stop 阻止冒泡修饰符
<div @click="parent">parent
<div @click.stop="child">child
<div @click="grandson.stop">grandson</div>
</div>
</div>
parent(){ console.log("parent")},
child(){console.log("child")},
grandson(e){console.log("grandson")}
点击grandson,不加stop,控制台会出现这样的信息,
2.capture 捕获
<div @click.capture="parent">parent
<div @click="child">child
<div @click="grandson">grandson</div>
</div>
</div>
点击grandson,控制台会出现这样的信息,
#####################################################这里是阻止事件传播
<div @click.capture.stop="parent">parent
<div @click="child">child
<div @click="grandson">grandson</div>
</div>
</div>
3.once 只执行一次
<div @click="parent">parent
<div @click.once="child">child
<div @click="grandson">grandson</div>
</div>
</div>
这里第一次点击grandson三个都出现,但点击第二次的时候child就不出现了
4.self 只点自己身上才运行
<div @click="parent">parent
<div @click.self="child">child
<div @click="grandson">grandson</div>
</div>
</div>
5 .prevent 阻止元素发生默认行为
这个代码只会输出parent,不会发生跳转,从而阻止浏览器的默认行为
<a href="www.baidu.com" @click.prevent="parent"></a>