vue的事件修饰符

vue的常见事件修饰符：.stop .prevent .capture .self .once

下面一一介绍事件修饰符

1、.stop

阻止事件冒泡

<div style="height:100px;width:400px;background:red;" 	@click="father()">
   <input type="button" name="点击我" id="" @click.stop="child()">
</div>
new Vue({
        el:'#app',
        data:{},
        methods: {
            father:function(){
                console.log("你当前点击父元素")
            },
            child:function(){
                console.log("你当前点击子元素")
            }
        },
    })

点击按钮后，先触发子元素，再触发父元素事件，添加stop后，只会触发子元素。

2、.prevent 阻止默认事件,常用于a标签有href的点击事件

<a href="http://www.baidu.com" @click.prevent="target()">点击我跳转</a>

添加.prevent时，只会触发事件，不会发生a标签的跳转

3、capture 添加事件侦听器，使用事件捕获

与正常没有添加任何修饰符正好相反。先触发父元素事件，然后出发子元素事件。

4、.self 只点击自己

<div style="height:100px;width:400px;background:red;" @click.self="father()">
     <input type="button" name="点击我" id="" @click="child()">
</div>

只会触发child事件。不会触发father事件

5、once只会触发一次

事件点击时，只会触发一次当前的点击事件，再次点击不会触发事件。

注：self和stop之间的区别：

self只会阻止自己不会影响其他事件，不会阻止事件冒泡。