vue点击事件、vue阻止冒泡事件、 @click.stop、 v-on:click.stop、vue点击阻断、vue点击子集的方法不执行父级的方法

 

相信点击事件是在vue框架里面的一个常用的方法
正常的点击事件为 v-on:click=“方法名(参数)”
简写为@click=“方法名(参数)”
有些情况下会出现父级元素有点击事件、子元素也有点击事件
这样就会出现点击子元素会执行两次方法

 

正常情况下点击列表的关闭按钮会删除元素
但是它的父元素有点击添加样式的功能
所以在点击列表删除按钮的时候会删除列表这个字段、但是会给第三个元素添加样式
由于列表这个字段已经删除了、所以活给我的这个字段添加样式
在这里我添加了alert方便大家区分

#app{ width: 100%; height: 100%;}
        .navList{
            width: 500px;
            margin: 100px auto;
            overflow: hidden;
        }
        .navList span{
            cursor: pointer;
            float: left;
            border: 1px solid #ddd;
            padding: 5px 15px;
            border-radius: 6px;
            margin: 0 10px;
        }
        .navList span:hover,.navList span.on{
            background-color: #0A98D5;
            color: #fff;
            border-color: #0A98D5;
        }
        .navList span i{
            font-style: normal;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
        }
        .navList span i:hover{
            background-color: #ccc;
            color: #fff;
        }

<div id="app">
    <div class="navList">
        <span @click="gotoMenu({num, item})" v-for="(item, num) in navList" :key="num" :class="isActive === num ? 'on' : ''">{{item}} <i @click="deteletBtn({num, item})">x</i></span>
    </div>
</div>

var app = new Vue({
        el: '#app',
        data: {
            navList: ['首页', '详情', '列表', '我的'],
            isActive: 0,
        },
        methods: {
            gotoMenu (e) {
                alert('给' + e.item + '添加样式')
                this.isActive = e.num
            },
            deteletBtn (e) {
                alert('删除' + e.item + '标签，这是第' + e.num + '个元素')
                this.navList.splice(e.num,1);
            }
        }
    })

所以在这种情况下直接写点击事件得到的效果就不是你所想要的
所以就需要增加一个阻断事件、防止事件继续冒泡
在此只需要给@click事件添加stop方法就可以

@click.stop="deteletBtn({num, item})"

<div id="app">
    <div class="navList">
        <span @click="gotoMenu({num, item})" v-for="(item, num) in navList" :key="num" :class="isActive === num ? 'on' : ''">{{item}} <i @click.stop="deteletBtn({num, item})">x</i></span>
    </div>
</div>