.stop 的功能是用来阻止事件冒泡。
    什么是事件冒泡呢？
    设定两个div，粉色的div包裹在蓝色的div中。点击对应颜色的div会出现对应的颜色提示，
    具体代码如下：

    1. <div 
    2. style="width: 300px;height: 300px; background-color: lightblue;" 
    3. @click="blue()">
    4.     <div style="width: 200px;height: 200px; background-color: lightpink;" 
    5.     @click.stop="pink()">
    6.   </div>
    7. </div>
    1. blue(){
    2.     alert('蓝色')
    3. },
    4. pink(){
    5.     alert('粉色')
    6. },

    image.png
    按常理来说，点击粉色区域时会提示“粉色”，点击蓝色区域时会提示“蓝色” 。但是实际上，在你点击粉色区域的同时，其下面的蓝色区域（父标签）也会被点击，导致页面会先后提示”粉色”与”蓝色”，这种现象就是所谓的事件冒泡。
    解决方法：
    用.stop去阻止事件的冒泡：内部标签中的点击事件用.stop进行修饰，阻止冒泡。这样，当点击粉色区域时，就不会触发蓝色区域的点击事件了。