vueclick阻止事件冒泡

在 Vue.js 中，可以使用 @click.stop 或者 @click.prevent 来阻止事件冒泡。

@click.stop 可以阻止事件冒泡，即不再向父元素传递事件。

例如：

<template>
  <div @click.stop="handleClick">
    <button @click="handleButtonClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('父元素被点击了')
    },
    handleButtonClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

上面的代码中，当点击按钮时，事件不会向父元素传递，所以只会输出'按钮被点击了'，不会输出'父元素被点击了'。

@click.prevent 可以阻止默认行为，例如阻止表单提交、链接跳转等等。

例如：

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputValue">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('表单被提交了')
    }
  }
}
</script>

上面的代码中，当点击提交按钮时，表单不会被提交，所以只会输出'表单被提交了'，不会刷新页面。