Vue.js 点击穿透：@click.stop 阻止事件传播

点击穿透是指当一个元素被点击时，该元素下方的元素也会接收到点击事件。在 Vue 中，通过 @click 事件可以触发一个方法，而 @click.stop 可以阻止事件继续传播到下方的元素，从而实现点击穿透的效果。

例如，如果想要实现点击某个元素时，不让下方的元素接收到点击事件，可以在点击事件中调用 @click.stop 方法，示例代码如下：

<template>
  <div>
    <div @click='handleClickOuter' style='background-color: red; padding: 20px;'>
      点击我
    </div>
    <div @click='handleClickInner' style='background-color: green; padding: 20px; margin-top: 10px;'>
      不应该接收到点击事件
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClickOuter() {
      console.log('点击了外部元素');
    },
    handleClickInner() {
      console.log('点击了内部元素');
    }
  }
}
</script>

在上述代码中，如果点击红色区域，控制台会输出'点击了外部元素'；如果点击绿色区域，控制台不会输出'点击了内部元素'，因为点击事件被阻止了传播。

注意：点击穿透可能会导致用户体验上的问题，因此在使用时需要谨慎考虑。