Vue 基础面试题, Vue 中是如何使用 event 对象的?
Vue 基础面试题, Vue 中是如何使用 event 对象的?
QA
Step 1
Q:: Vue 中是如何使用 event 对象的？
A:: 在 Vue 中，event 对象通常通过事件处理器的参数进行访问。Vue 提供了一个 $event 对象，可以用作自定义事件的回调参数。例如：在模板中 <button @click="handleClick($event)">Click me</button>，在 handleClick 方法中，你可以访问事件对象并使用它的属性，如 event.target、event.preventDefault() 等。
Step 2
Q:: 如何在 Vue 中阻止事件冒泡？
A:: 可以通过在事件处理器内调用 event.stopPropagation() 来阻止事件冒泡。例如：<button @click.stop="handleClick">Click me</button>。Vue 提供了 .stop 修饰符来简化这个操作。
Step 3
Q:: Vue 中如何使用事件委托？
A:: 在 Vue 中，事件委托可以通过在父元素上监听事件，然后在事件处理器中通过 event.target 判断事件源进行处理。例如：在 ul 上绑定 click 事件处理器，而不是在每个 li 上。<ul @click="handleClick"><li>Item 1</li><li>Item 2</li></ul>。handleClick 方法中可以通过 event.target 来判断哪个 li 被点击。
Step 4
Q:: 如何在 Vue 中自定义事件？
A:: 在 Vue 中，可以通过 $emit 方法来触发自定义事件。例如，在子组件中触发事件：this.$emit('custom-event', payload)，父组件可以通过 v-on 或 @ 监听该事件：<child-component @custom-event="handleEvent"/>。