vue实现自定义事件
Vue 自定义事件实现方法
在 Vue 中，自定义事件是通过 $emit 方法触发的，允许子组件向父组件传递数据。以下是实现自定义事件的几种常见方式：
基础用法
子组件通过 $emit 触发事件，父组件通过 v-on 监听：
// 子组件
<button @click="$emit('custom-event', 'payload')">触发事件</button>
// 父组件
<child-component @custom-event="handleEvent" />事件名规范
建议使用 kebab-case 命名事件（如 custom-event），因为在 DOM 模板中事件名会自动转换为小写。
高级用法
通过 emits 选项声明事件，提高可读性并支持校验：
// 子组件
export default {
emits: {
'custom-event': (payload) => {
return typeof payload === 'string' // 校验参数
}
},
methods: {
triggerEvent() {
this.$emit('custom-event', 'data')
}
}
}事件总线模式
通过空的 Vue 实例作为中央事件总线（适用于非父子组件通信）：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A（发送事件）
EventBus.$emit('event-name', data)
// 组件B（接收事件）
EventBus.$on('event-name', (data) => {})注意事项
- 组件销毁前应使用
EventBus.$off()移除事件监听 - Vue 3 推荐使用
mitt等第三方库替代事件总线 - 复杂场景建议使用 Vuex 或 Pinia 进行状态管理
