距离说明VUE中@click.stop的作用

在Vue中，@click.stop的作用是阻止点击事件的冒泡传播。当我们在一个嵌套的元素结构中绑定了多个点击事件时，点击其中一个元素，该元素上的点击事件会先被触发，然后事件会沿着DOM树向上冒泡传递，最终被父级元素捕获。但是，有时我们希望点击某个元素时，只触发该元素上的点击事件，不再继续向上级元素传递，这时就可以使用@click.stop修饰符。

例如，下面的代码中，当我们点击按钮时，会先触发按钮的点击事件，然后该事件会向上冒泡，最终被包含该按钮的div元素捕获：

<template>
  <div @click="handleDivClick">
    <button @click="handleBtnClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick() {
      console.log('div clicked');
    },
    handleBtnClick() {
      console.log('button clicked');
    }
  }
}
</script>

如果我们希望点击按钮时，只触发按钮的点击事件，不再触发div元素的点击事件，可以在按钮的@click事件绑定中加入.stop修饰符：

<template>
  <div @click="handleDivClick">
    <button @click.stop="handleBtnClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick() {
      console.log('div clicked');
    },
    handleBtnClick() {
      console.log('button clicked');
    }
  }
}
</script>

这样点击按钮时，事件就不会继续向上级元素传递，不再触发div元素的点击事件，只会触发按钮的点击事件。