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 替代事件总线模式。