vue on 和 emit实现
Vue 中的 $on 和 $emit 实现
$on 和 $emit 是 Vue 中用于实现事件监听和触发的核心方法，常用于组件间的通信。
基本用法
$emit 用于触发事件，$on 用于监听事件：
// 触发事件
this.$emit('event-name', eventData);
// 监听事件
this.$on('event-name', (eventData) => {
console.log('事件触发:', eventData);
});父子组件通信
在父子组件中，$emit 通常用于子组件向父组件传递数据：
// 子组件
methods: {
handleClick() {
this.$emit('custom-event', { data: '子组件数据' });
}
}
// 父组件模板
<child-component @custom-event="handleCustomEvent"></child-component>
// 父组件方法
methods: {
handleCustomEvent(payload) {
console.log('接收到子组件数据:', payload.data);
}
}非父子组件通信
对于非父子关系的组件，可以通过一个空的 Vue 实例作为事件总线：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
// 组件A - 触发事件
EventBus.$emit('global-event', { message: '全局事件' });
// 组件B - 监听事件
EventBus.$on('global-event', (payload) => {
console.log('接收到全局事件:', payload.message);
});移除事件监听
为避免内存泄漏，需要及时移除监听：
// 添加监听
const handler = (data) => console.log(data);
this.$on('event', handler);
// 移除监听
this.$off('event', handler);
// 移除所有监听
this.$off('event');注意事项
- 事件名建议使用 kebab-case 命名（如
my-event），避免与 HTML 属性冲突。 - 在组件销毁前（
beforeDestroy钩子）移除所有自定义事件监听。 - 对于复杂应用，建议使用 Vuex 替代事件总线模式。
