vue阻止冒泡有几种写法

在Vue.js中，防止事件冒泡通常通过`event.stopPropagation()`方法实现。以下是三种常见的写法：

1. 直接在处理函数内调用：

<button @click="handleClick($event)">点击阻止冒泡</button>

<script>
export default {
  methods: {
    handleClick(event) {
      event.stopPropagation(); // 阻止事件向上冒泡
      // 其他处理逻辑...
    }
  }
}
</script>

2. 使用模板绑定事件并传递event对象：

<button @click.prevent.stop="handleClick">点击阻止冒泡</button>

<script>
export default {
  methods: {
    handleClick() {
      // ...
    }
  }
}
</script>

这里的`.prevent.stop`会合并两个修饰符，分别阻止默认行为和阻止事件冒泡。

3. 如果你在组件的模板上使用v-on directive，可以这样写：

<button v-on:click.prevent.stop="handleClick">点击阻止冒泡</button>

这种方法同样能在绑定事件的时候同时阻止默认行为和冒泡。