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 可以灵活实现组件间的松耦合通信。
