@click.stop

引用[1]:在Vue.js中，@click.stop是一个修饰符，用于阻止点击事件的传播。当一个元素被点击时，它所处的DOM层级结构中的所有父级元素都会接收到该事件。但是使用@click.stop修饰符的元素，当它被点击时，事件将不会再向父级元素传递，从而避免事件被不必要地多次触发。[2]

所以，当你在Vue.js中使用@click.stop修饰符时，只会触发被修饰的元素的点击事件，而不会触发其父级元素的点击事件。这对于需要阻止事件传播的情况非常有用。例如，在一个父级元素上绑定了@click事件，在子元素上使用@click.stop修饰符，点击子元素时只会触发子元素的点击事件，而不会触发父元素的点击事件。

举个例子，如果你有以下代码：

<template>
  <div @click="doSomething">
    <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      console.log('doSomething')
    },
    doSomethingElse() {
      console.log('doSomethingElse')
    }
  }
}
</script>

当你点击按钮时，只会触发doSomethingElse方法，而不会触发doSomething方法。这是因为@click.stop修饰符阻止了点击事件的传播，只触发了被修饰的元素的点击事件。