修飾符-box-stop、self

index.html

<div id="app">
  <div class="box" @click.self="msg = 'c'">
    <div class="box" @click.self="msg = 'b'">
      <div class="box" @click.stop="msg = 'a'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

script.js

new Vue({
  el:"#app",
  data:{
    msg:''
  },
})

style.scss

.box{
  display: inline-block;
  min-width: 100px;
  min-height: 100px;
  padding: 30px;
  border: 3px solid red;
}