vue 事件修饰符
.stop.prevent.capture.self.once 1 .stop 阻止冒泡修饰符 <div @click="parent">parent<div @click.stop="child">child<div @click="grandson.stop"
·
.stop.prevent.capture.self.once
1 .stop 阻止冒泡修饰符<div @click="parent">parent <div @click.stop="child">child <div @click="grandson.stop">grandson</div> </div> </div>
点击grandson，不加stop，控制台会出现这样的信息，parent(){ console.log("parent")}, child(){console.log("child")}, grandson(e){console.log("grandson")}
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 只点自己身上才运行
5 .prevent 阻止元素发生默认行为<div @click="parent">parent <div @click.self="child">child <div @click="grandson">grandson</div> </div> </div>
这个代码只会输出parent，不会发生跳转，从而阻止浏览器的默认行为
<a href="www.baidu.com" @click.prevent="parent"></a>
Vue社区为您提供最前沿的新闻资讯和知识内容
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)