面试题：Vue中.stop修饰符在事件处理中的功能与实际应用场景

Question

请阐述Vue事件修饰符.stop的功能，并举例说明在实际项目开发中，什么场景下会用到该修饰符。比如在嵌套的DOM元素都绑定了点击事件时，如何利用.stop实现特定的事件阻止行为。

Answer 1

Vue事件修饰符.stop的功能

.stop修饰符用于阻止事件冒泡。在DOM事件流中，当一个元素触发事件时，该事件会从最具体的目标元素开始，向上传播到祖先元素，这个过程就是事件冒泡。.stop修饰符会阻止事件继续向上冒泡。

实际项目开发场景举例

1. 嵌套菜单点击事件：在一个多层嵌套的菜单结构中，每层菜单都有点击事件。例如，一个三级菜单，当点击最内层菜单项时，只想触发最内层菜单项的点击事件，而不想让点击事件冒泡到外层菜单触发其点击事件。

<template>
  <div class="outer" @click="outerClick">
    外层菜单
    <div class="middle" @click="middleClick">
      中层菜单
      <div class="inner" @click.stop="innerClick">
        内层菜单
      </div>
    </div>
  </div>
</template>

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

在上述代码中，当点击“内层菜单”时，由于使用了.stop修饰符，点击事件不会冒泡到“中层菜单”和“外层菜单”，只会触发innerClick方法。

2. 模态框内按钮点击：在一个模态框组件中，模态框本身有一个点击关闭的功能（点击模态框背景关闭模态框），而模态框内部有一些按钮，当点击这些按钮时，不想触发模态框的关闭事件（即阻止点击事件冒泡到模态框背景）。

<template>
  <div class="modal" @click="closeModal">
    <div class="modal-content">
      <button @click.stop="handleButtonClick">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal() {
      console.log('关闭模态框');
    },
    handleButtonClick() {
      console.log('按钮点击');
    }
  }
}
</script>

这里点击按钮时，事件不会冒泡到模态框背景，closeModal方法不会被触发，只会执行handleButtonClick方法。