-
click.stop
stop:指的是阻止父组件(节点)的事件冒泡。。。
<div id="app">
<div class="box" @click="box()">
<div class="box-child" @click="boxchild()">
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
box: function () {
alert("this is box event");
},
boxchild: function () {
alert("this is boxchild event");
}
}
});
运行结果先alert(boxchild)在alert(box)
如果用@click.stop,此时子组件(节点)会阻止父组件(节点)的click方法执行,即阻止父节点冒泡
<div id="app">
<div @click="box()">
<div @click.stop="boxchild()">
</div>
</div>
</div>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
box: function () {
alert("this is box event");
},
boxchild: function () {
alert("this is boxchild event");
}
}
});
那结果就值alert(boxchild)了
-
click.prevent
阻止事件的默认行为,比如click,blur,change。。。
想去酒吧,就得想办法阻止学习,prevent登场。。(阻止默认学习的惯性思维)
<a href="http://gostudy.com" @click.prevent="gobar">就不跳转,我要去gobar</a>
结果愿望实现了。。。