vue 阻止事件冒泡常用的方法

在 Vue 中，阻止事件冒泡有两种常用方法：
1. 使用 `()` 方法：
在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。例如：
```html
<template>
<div @click="parentClick">
<button @click="childClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
parentClick() {
('父元素被点击');
},
childClick(event) {
();
('子元素被点击');
},
},
};
</script>
```
在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。
2. 使用 Vue 的修饰符 `.stop`：
Vue 提供了一种更简洁的方式来阻止事件冒泡，那就是使用 `.stop` 修饰符。例如：
```html
<template>
<div @click="parentClick">
<button @="childClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
parentClick() {
('父元素被点击');
},
childClick() {
('子元素被点击');
},
},
};
</script>
```
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。这种方法更简洁，推荐使用。