vue实现自定义事件
Vue 自定义事件实现方法
在 Vue 中实现自定义事件主要依赖 $emit 方法，允许子组件向父组件通信。以下是具体实现方式：
子组件触发事件
通过 this.$emit('事件名', 可选参数) 触发自定义事件：
// ChildComponent.vue
<template>
<button @click="handleClick">触发事件</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', { data: '示例数据' })
}
}
}
</script>父组件监听事件
在父组件中使用 v-on 或 @ 语法监听子组件触发的事件：
// ParentComponent.vue
<template>
<child-component @custom-event="handleCustomEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
methods: {
handleCustomEvent(payload) {
console.log('收到事件:', payload.data) // 输出: "示例数据"
}
}
}
</script>事件校验（Vue 3+）
Vue 3 支持为自定义事件添加校验：
// ChildComponent.vue
export default {
emits: {
'custom-event': (payload) => {
// 返回布尔值表示事件是否有效
return payload && typeof payload.data === 'string'
}
},
methods: {
handleClick() {
this.$emit('custom-event', { data: '有效数据' })
}
}
}移除事件监听器
可以通过 $off() 方法移除事件监听：
// 移除特定事件
this.$off('custom-event')
// 移除所有事件
this.$off()事件总线模式（跨组件通信）
创建全局事件总线实现任意组件间通信：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A发送事件
EventBus.$emit('global-event', data)
// 组件B监听事件
EventBus.$on('global-event', callback)注意事项
- 事件名推荐使用 kebab-case 命名（如
my-event） - Vue 3 的
emits选项可替代$listeners（已移除） - 避免过度使用事件总线，复杂场景建议使用 Vuex/Pinia
通过以上方式可以灵活实现 Vue 组件间的自定义事件通信。
