面试题：Vue修饰符：事件修饰符的应用

Question

在Vue中，事件修饰符可以极大提升代码的功能性与可读性。请举例说明如何使用事件修饰符解决常见的事件处理问题，比如阻止事件冒泡、防止默认行为，并写出具体代码示例。

Answer 1

阻止事件冒泡

在Vue中，可以使用.stop修饰符来阻止事件冒泡。

示例代码如下：

<div id="app">
  <div @click="handleOuterClick">
    外层div
    <button @click.stop="handleInnerClick">点击我</button>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleOuterClick() {
      console.log('外层div被点击');
    },
    handleInnerClick() {
      console.log('按钮被点击');
    }
  }
});
</script>

在上述代码中，当点击按钮时，handleInnerClick方法会被调用，同时由于@click.stop的存在，事件不会冒泡到外层的div，因此handleOuterClick方法不会被触发。

防止默认行为

在Vue中，使用.prevent修饰符可以防止事件的默认行为。

示例代码如下：

<div id="app">
  <a href="https://www.example.com" @click.prevent="handleClick">点击链接</a>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleClick() {
      console.log('链接被点击，但不会跳转');
    }
  }
});
</script>

在上述代码中，当点击链接时，handleClick方法会被调用，同时由于@click.prevent的存在，链接的默认跳转行为被阻止。