首先我们要知道什么是事件冒泡,什么是默认事件。
事件冒泡:
<div @click="a"> <div @click="b"></div> </div>
如上代码,事件a和事件b,我点击事件b的时候会将事件a也就是它的父级元素绑定的事件一同触发,这就是冒泡。像水里的气泡一样,从最下面一直咕噜咕噜到最上面。
默认事件:
一些特殊的标签,比如a标签,input标签和form表单submit这种类型,你点击的话都会有一个默认的提交跳转事件,这是默认的行为,所以是默认事件。
但是我们有的时候只需要触发事件b,或者是只需要把a标签当成一个普通的行标签或者是块标签,这时候需要阻止冒泡和默认事件。
js里面:
function(e){ e.stopPropagation();//阻止冒泡事件 }
function(e){ e.preventDefault();//阻止默认行为 //return false;//也可以 }
但是vue已经处理好了:
@click.stop 代表阻止冒泡事件
@click.prevent 代表阻止默认事件