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事件处理的一些常用方法,我们可以根据业务需求选择合适的方法,以优化用户体验。