面试题：Vue中.stop修饰符在事件绑定里的应用场景

Question

请描述在Vue的事件绑定中，.stop修饰符的作用是什么？并举一个实际场景的代码示例说明它是如何阻止事件冒泡的。

Answer 1

##.stop修饰符的作用 在Vue的事件绑定中，.stop修饰符用于阻止事件冒泡。事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始，依次向外传播到祖先元素。.stop修饰符可以在事件到达特定元素时停止这种传播。

实际场景代码示例

<template>
  <div id="outer" @click="outerClick">
    外层div
    <div id="inner" @click.stop="innerClick">
      内层div
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层div被点击');
    },
    innerClick() {
      console.log('内层div被点击');
    }
  }
}
</script>

在上述代码中，当点击内层div时，由于使用了.stop修饰符，事件不会冒泡到外层div，因此只会输出“内层div被点击”。若去掉.stop修饰符，点击内层div时，会先输出“内层div被点击”，接着输出“外层div被点击”，因为事件冒泡到了外层div。