SOURCE

 const options = {
     methods:{
         outer(){
            console.log('outer');
         },
         middle(){
              console.log('middle');
         },
         inner(){
              console.log('inner');
         }
     }
 }

 const app = Vue.createApp(options);
 app.mount("#root");

<div id="root"> 
　　<div class="outter" @click.self="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

.outter{
    width: 400px;
    height: 400px;
    background: #ff00ff;
}

.middle{
    width: 200px;
    height: 200px;
    background: #00ff00;
}

.inner{
    
}