事件修饰符 .self 和 .stop 的区别

在vue中 .self 和 .stop  的功能有些相同，都可以阻止冒泡，但他们其实也是由区别的

.stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡

 .self 是我只让自己不冒泡，其他人我不管

<div id="app">
        <!-- .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡 -->
        <!-- .self 是我只阻止自己的冒泡事件，其他人我不管 -->
        <div id="outer" @click.self="outerClick()">
            <div id="inner" @click.stop="innerClick()">
                <input type="button" value="按钮"  @click="btnClick()" name="" id="">
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>

        let vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                innerClick(){// 内部div点击事件
                    console.log("内部div点击事件");
                },
                btnClick(){// 按钮点击事件
                    console.log("按钮点击事件");
                },
                outerClick(){// 外部div点击事件
                    console.log("外部div点击事件");
                }
            }
        })

    </script>