例如：
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script>再例如：用@click.stop
<div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script> 结果：只弹出“noclick”，就不会触发dodo这个方法.在项目中用到额例子： <div class="taskList_con" @click="goreportlist('接受')"> <p class="title">任务编号：YCWL20180315</p> <div class="content"> <div class="divided clear"> <div class="img"> <img src="../../assets/img/renwuqingdan_icon_shi_pressed@3.png"> </div> <div class="con_first"> <span>霸州</span> </div> <div class="con_second">9:20,03-15</div> </div> <div class="divided clear"> <div class="con_first">寿光羊口</div> <div class="con_second">14:20,03-15</div> <div class="button_div"> <button style="background-color:#FE6E00;" @click.stop="receive" class="button">接受</button> </div> </div> </div> </div> 在methods下： receive(){ this.$router.push({ name:'checkprocess', }) }, goreportlist(name) { this.$router.push({ name: "taskdetail" }); } 结果：点击div里任意部分可跳转到taskdetail详情页面，但是点击接受按钮跳转到checkprocess安检列表页面。用@click.stop阻止了事件冒泡的发生。