vue on 和 emit实现

Vue 中 $on 和 $emit 的实现

$on 和 $emit 是 Vue 中用于实现自定义事件的核心方法，常用于父子组件或兄弟组件间的通信。以下是具体实现方式：

使用 $emit 触发事件

在发送事件的组件中调用 $emit，传递事件名称和可选数据：

// 子组件或触发事件的组件
this.$emit('event-name', data);

使用 $on 监听事件

在接收事件的组件中调用 $on，监听事件并处理数据：

// 父组件或监听事件的组件
this.$on('event-name', (data) => {
  console.log('Received data:', data);
});

父子组件通信示例

子组件 (ChildComponent.vue)
通过按钮点击触发事件：

<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('data-sent', { message: 'Hello from child!' });
    }
  }
}
</script>

父组件 (ParentComponent.vue)
监听子组件事件并接收数据：

<template>
  <child-component @data-sent="handleData"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleData(data) {
      console.log(data.message); // 输出: "Hello from child!"
    }
  }
}
</script>

非父子组件通信

通过创建一个空的 Vue 实例作为事件总线（Event Bus）：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

组件 A (触发事件)

import { EventBus } from './event-bus.js';
EventBus.$emit('global-event', { payload: 'Data' });

组件 B (监听事件)

import { EventBus } from './event-bus.js';
EventBus.$on('global-event', (data) => {
  console.log(data.payload); // 输出: "Data"
});

注意事项

• 移除监听器：避免内存泄漏，在组件销毁前使用 $off 移除监听：

  EventBus.$off('global-event');

• 作用域：$on 和 $emit 必须在同一 Vue 实例或事件总线上调用。
• 替代方案：复杂场景建议使用 Vuex 或 Provide/Inject。

通过 $on 和 $emit 可以灵活实现组件间的松耦合通信。