面试题：Vue中.prevent与.stop在复杂组件结构中的交互

Question

假设存在一个多层嵌套的Vue组件结构，最内层组件有一个点击事件，需要同时阻止事件冒泡和默认行为。请写出父组件和子组件的相关模板及逻辑代码，阐述在这种情况下.prevent和.stop修饰符应该如何正确使用，以及如果使用不当可能会出现什么问题。

Answer 1

子组件代码

1. 模板部分 (template)：

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

2. 逻辑部分 (script)：

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮点击，事件冒泡和默认行为已阻止');
    }
  }
}
</script>

在子组件中，.prevent 修饰符用于阻止事件的默认行为，比如按钮的提交表单行为；.stop 修饰符用于阻止事件冒泡，即防止事件向父级组件传递。

父组件代码

1. 模板部分 (template)：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

2. 逻辑部分 (script)：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

修饰符使用不当的问题

1. 缺少.prevent：如果只使用 .stop 而缺少 .prevent，那么虽然事件不会冒泡到父组件，但按钮的默认行为（如提交表单等）仍会执行，可能导致不必要的页面刷新或表单提交等情况。
2. 缺少.stop：如果只使用 .prevent 而缺少 .stop，事件的默认行为会被阻止，但事件会继续冒泡到父组件，可能触发父组件中与该事件相关的不必要逻辑。
3. 放置位置错误：如果在父组件上使用这些修饰符而不是在子组件触发事件的元素上，无法阻止子组件内部事件的默认行为和冒泡。只有在子组件触发事件的元素上正确使用这两个修饰符，才能确保事件的默认行为被阻止且不向上冒泡。