Vue3 事件处理
Vue3 事件处理
Vue3提供了丰富的事件绑定与处理方式，使得我们可以将用户交互与组件的状态完美地结合起来，以达到更好的用户体验。
事件绑定
Vue3提供了 v-on 指令来绑定事件，示例代码如下：
<template>
<div>
<button v-on:click="clickHandler">点击</button>
</div>
</template>
<script>
export default {
methods: {
clickHandler() {
console.log('click')
}
}
}
</script>
v-on:click 表示点击事件的绑定，这里 clickHandler 是我们定义的一个方法，它会在按钮被点击时被调用。
此外，在Vue3中，我们可以采用缩写形式来绑定事件，例如：
<template>
<div>
<button @click="clickHandler">点击</button>
</div>
</template>
这样可以使得代码更加简洁。
事件修饰符
Vue3中提供了一些事件修饰符，用于对事件进行处理。常用的事件修饰符如下：
.prevent阻止默认事件；.stop阻止事件冒泡；.capture事件在捕获阶段被触发；.self只有在事件的目标是当前元素自身时才触发事件；.once事件只触发一次；.passive禁止滚动时阻止默认事件。
这些修饰符可以组合使用，例如：
<template>
<div>
<button v-on:click.prevent.stop="clickHandler">点击</button>
</div>
</template>
这里的 .prevent 阻止了默认事件，.stop 阻止了事件冒泡。
自定义事件
Vue3中我们也可以自定义事件，示例代码如下：
<template>
<div>
<child-component @my-event="handler"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handler() {
console.log('event received')
}
}
}
</script>
在子组件中我们可以这样定义这个事件：
<template>
<div>
<button @click="$emit('my-event')">触发事件</button>
</div>
</template>
这里 @click 触发了 my-event 事件，它会被父组件 @my-event 监听到，从而触发 handler 方法。
事件总线
在Vue3中我们可以创建一个全局的事件总线来协调各个组件之间的事件。示例代码如下：
import mitt from 'mitt'
const emitter = mitt()
export default emitter
在任意组件中我们可以导入这个事件总线，以达到组件间的通信。
结语
这是Vue3事件处理的一些常用方法，我们可以根据业务需求选择合适的方法，以优化用户体验。