测试验证vue3修饰符

 <div class="outer" @click.prevent.self="handleOuterClick">
        Out div
        <div class="inner" @click.self.prevent="handleInnerClick">
          Inner Div
        </div>
 </div>
<script setup>
   const handleOuterClick = () => {
  console.log("点击外面");
};
const handleInnerClick = () => {
  console.log("点击里面");
};
</script>
<style scoped>
.outer {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  padding: 20px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin-top: 20px;
  padding: 20px;
}
</style>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。