在開發過程中我們會遇到這種情況，一個大盒子中包裹這一個小盒子，兩個盒子都有點擊事件，例如：

這個時候如果點擊評價有可能會點擊到它所在的大盒子，如果使用css中的z-index設置層級的話如果頁面的盒子多的話會混亂，所以我們可以使用事件修飾符來簡化這個過程。對于點擊事件，可以使用 .stop 修飾符來阻止事件冒泡，代碼簡化后如下所示：

<template>  <view class="big-box" @click="bigBoxClick">  <!-- 大盒子 -->  <view class="small-box" @click.stop="smallBoxClick">  <!-- 小盒子 -->  <!-- 小盒子的內容 -->  </view>  </view>  
</template>  <script>  
export default {  methods: {  bigBoxClick() {  console.log('大盒子被點擊了');  },  smallBoxClick() {  console.log('小盒子被點擊了');  }  }  
}  
</script>  <style>  
/* ... 樣式代碼 ... */  
</style>

這樣通過 .stop 修飾符來阻止事件冒泡點擊小盒子的時候就會保證不會點擊到大盒子，點擊大盒子也不會觸發小盒子（雖然本來就不會觸發，但還是說一下）。

有小伙伴需要做畢設的可以私信哦（對于小白可以教學功能實現、免費配環境）