vue实现自定义事件
Vue 自定义事件实现方法
使用 $emit 触发自定义事件
在子组件中通过 $emit 方法触发事件，父组件通过 v-on 监听。
子组件代码示例：
<button @click="$emit('custom-event', 'event data')">触发事件</button>父组件监听示例：
<child-component @custom-event="handleEvent" />父组件方法定义：
methods: {
handleEvent(data) {
console.log('收到事件数据:', data)
}
}使用 v-model 实现双向绑定
通过自定义 model 选项和 $emit('input') 实现类似 v-model 的双向绑定。
子组件代码：
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue)
}
}父组件使用：
<custom-input v-model="inputValue" />使用事件总线（Event Bus）
创建全局事件总线实现跨组件通信。
创建事件总线：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()发送事件：
EventBus.$emit('event-name', payload)接收事件：
EventBus.$on('event-name', payload => {
// 处理事件
})使用 .sync 修饰符
实现父子组件双向数据绑定，Vue 2.x 特有语法。
子组件触发更新：
this.$emit('update:title', newTitle)父组件使用：
<child-component :title.sync="pageTitle" />Vue 3 的 emits 选项
Vue 3 中显式声明组件发出的自定义事件，提供更好的文档和类型检查。
组件定义：
export default {
emits: ['custom-event'],
methods: {
triggerEvent() {
this.$emit('custom-event', data)
}
}
}注意事项
- 自定义事件名建议使用 kebab-case 命名
- 复杂数据建议使用对象包装
- 及时移除事件监听避免内存泄漏
- Vue 3 中移除了
$on、$off等实例方法，需使用外部库替代事件总线
