Vue事件符.stop .self的含义用法

今天我们来学习一下Vue事件符.stop .self的含义用法，跟着我一起来学习吧~
学习参考：
https://www.jianshu.com/p/012c97c67560

.self 和 .stop 区别:

self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
stop是从自身开始不向外部发射冒泡信号

<div id="app"> 
    <div class="wrapper" v-on:click="wrapper"> 
        <div class="box" v-on:click="box"> 
            <button v-on:click="btn">阻止单击事件继续传播</button> 
        </div> 
    </div> 
</div> 
<script> 
    var app = new Vue({ 
        el: "#app", 
        data: { 
            name: "Vue.js" 
        }, 
        methods: { 
            wrapper: function () { 
                console.log("wrapper");
            }, 
            box: function () { 
                console.log("box");
            } , 
            btn: function () { 
                console.log("这是btn");
            }

        } 
    }); 
</script>

正常情况下。 点击button会冒泡, 从html结构上 一层一层向上冒泡，父级有事件就会被触发
将会先弹出“btn”,再弹出“box”,再弹出“wrapper”。

1. .stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

<div id="app"> 
    <div class="wrapper" v-on:click="wrapper"> 
        <div class="box" v-on:click="box"> 
            <button v-on:click.stop="btn">阻止单击事件继续传播</button> 
        </div> 
    </div> 
</div> 
<script> 
    var app = new Vue({ 
        el: "#app", 
        data: { 
            name: "Vue.js" 
        }, 
        methods: { 
            wrapper: function () { 
                console.log("wrapper");
            }, 
            box: function () { 
                console.log("box");
            } , 
            btn: function () { 
                console.log("这是btn");
            }

        } 
    }); 
</script>

只弹出“noclick”

2. .self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号

<div id="app"> 
    <div class="wrapper" v-on:click="wrapper"> 
        <div class="box" v-on:click.self="box"> 
            <button v-on:click="btn">阻止单击事件继续传播</button> 
        </div> 
    </div> 
</div> 
<script> 
    var app = new Vue({ 
        el: "#app", 
        data: { 
            name: "Vue.js" 
        }, 
        methods: { 
            wrapper: function () { 
                console.log("wrapper");
            }, 
            box: function () { 
                console.log("box");
            } , 
            btn: function () { 
                console.log("这是btn");
            }

        } 
    }); 
</script>

这里点击button, 只会触发input事件,而不会触发box，但会向上冒泡

点击div,正常向上冒泡