Vue 基础面试题, 在 Vue 事件中传入 $event,使用 e.target 和 e.currentTarget 有什么区别?

Step 1

Q:: 在 Vue 事件中，传入 $event 时，使用 e.target 和 e.currentTarget 有什么区别？

A:: e.target 是指触发事件的最深层的元素，而 e.currentTarget 是指事件绑定的元素。e.target 可能是事件触发路径中的任意元素，而 e.currentTarget 总是当前事件处理函数附加到的元素。在 Vue 中使用 e.target 可以获取事件触发的具体元素，而 e.currentTarget 通常用于控制事件处理函数作用的范围。

Step 2

Q:: 在 Vue 中如何处理事件代理？

A:: 在 Vue 中，可以通过在父元素上使用 v-on 绑定事件处理函数，利用事件冒泡机制处理子元素的事件。通过 $event 参数传递事件对象，可以根据 e.target 来判断具体的子元素并执行相应的逻辑。这种方式常用于动态生成子元素的场景，减少直接在子元素上绑定事件处理函数的代码量。

Step 3

Q:: 在 Vue 中如何使用修饰符 .stop 和 .prevent？

A:: .stop 阻止事件继续传播，等同于调用 event.stopPropagation()；.prevent 阻止默认事件的触发，等同于调用 event.preventDefault()。这些修饰符可以简化代码，避免在事件处理函数中手动调用对应的方法。

Step 4

Q:: 如何在 Vue 中实现自定义事件？

A:: 在 Vue 中可以通过 $emit 方法触发自定义事件，父组件通过 v-on 监听子组件发出的事件。可以在子组件中使用 this.$emit('eventName', data) 触发事件，并在父组件中使用 <Child @eventName='handler' /> 绑定事件处理函数。