vue中$on实现

在Vue中，$on是事件监听的核心方法，用于监听自定义事件。以下是具体实现方式及注意事项：

基本用法

通过this.$on(eventName, callback)监听事件，eventName为事件名称字符串，callback是触发时执行的函数。例如：

this.$on('custom-event', (payload) => {
  console.log('事件触发，参数：', payload);
});

事件触发

使用$emit触发对应事件：

this.$emit('custom-event', { data: 'test' });

监听子组件事件

在父组件模板中可直接用v-on或@监听子组件事件：

<child-component @custom-event="handleEvent" />

对应方法：

methods: {
  handleEvent(payload) {
    console.log('子组件触发事件：', payload);
  }
}

移除监听

通过$off移除特定事件监听：

// 移除单个事件
this.$off('custom-event');
// 移除所有事件
this.$off();

注意事项

• 事件名建议使用kebab-case（如my-event），避免与HTML大小写不敏感特性冲突
• 避免滥用事件通信，复杂场景建议使用Vuex状态管理
• 组件销毁前需手动移除监听，防止内存泄漏