.stop事件修饰符 · vue

## 修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充 # .stop 修饰符 ## 能够实现阻止事件冒泡 ## 语法：@click.stop ## ![](https://img.kancloud.cn/ae/66/ae66c428d39672a5280e60ce6b3adef9_1258x771.png) 代码案例： ``` <div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click="inner"></div> </div> </div> ``` ![](https://img.kancloud.cn/91/33/9133151221519d072f41cdb021917422_1827x1146.png) ![](https://img.kancloud.cn/41/95/41953491004569ded4aff87a9828e5a8_1835x892.png) ## 通过上面的案例，我们了解了.stop修饰符的作用就是阻止事件的一个冒泡 ## 其作用类似原生JavaScript的event.stopPropagation()方法自己写的代码案例： ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> .outer{ width: 180px; height: 180px; background:gold; margin: 100px auto; padding:30px; border-radius: 50%; } .outer .center{ width: 120px; height: 120px; background: pink; padding: 30px; border-radius: 50%; } .outer .center .inner{ width:130px; height: 130px; background: cyan; border-radius: 50%; } </style> </head> <body> <div id="app"> <div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click.stop="inner"></div> </div> </div> </div> </body> <script src="vue/vue.js"></script> <script> var vue=new Vue({ el:"#app", methods:{ outer(){ alert("外层") } , center(){ alert("中间") }, inner(){ alert("内层") } } }) </script> </html> ```