面试题：Vue中如何阻止事件冒泡和捕获

Question

在Vue的模板语法中，当绑定一个事件时，怎样使用修饰符来阻止事件冒泡？如果是阻止事件捕获，又该如何处理？请举例说明。

Answer 1

在Vue的模板语法中：

1. 阻止事件冒泡：使用.stop修饰符。例如：

<button @click.stop="handleClick">点击我</button>

这里@click.stop表示当按钮被点击时，触发handleClick方法，同时阻止事件冒泡。

2. 阻止事件捕获：Vue中并没有直接阻止事件捕获的修饰符。事件捕获是从外向内传递事件，而Vue的事件绑定默认是在事件冒泡阶段触发。如果想要模拟阻止事件捕获的效果，需要在JavaScript中手动处理，例如：

<div @click="outerClick">
  <button @click="innerClick">点击我</button>
</div>

export default {
  methods: {
    outerClick(e) {
      if (e.target.tagName === 'BUTTON') {
        return;
      }
      // 处理外层div点击逻辑
    },
    innerClick() {
      // 处理按钮点击逻辑
    }
  }
}

这种方式通过判断事件源来模拟阻止类似事件捕获行为。