vue2.x中事件总线EventBus的使用

本文详细介绍了Vue2.x中事件总线(EventBus)的使用方法,并提供了具体的代码示例。同时,还手写了EventBus的实现原理,帮助读者深入理解其工作流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue2.x中事件总线EventBus的使用

一、使用方法

// eventBus.js
import Vue from "vue";
const EventBus = new Vue();
export default EventBus;
<!-- 容器A: 接收方 -->
<template>
    <div>{{ message }}</div>
</template>

<script>
    import eventBus from './event-bus'
    export default {
        data() {
            return {
                message: '我是容器A的内容'
            }
        },
        mounted() {
            eventBus.$on("sendMessage", (msg) => {
                this.message = msg;
            })
        },
        destroyed() {
            eventBus.$off("sendMessage")
        }
    }
</script>
<!-- 容器B:发送方 -->
<template>
    <button @click="sendToComponentA">点击</button>
</template>
<script>
    import eventBus from './event-bus'
    export default {
        methods: {
            sendToComponentA() {
                eventBus.$emit("sendMessage", "我来找容器A通信了")
            }
        }
    }
</script>

二、手写实现 EventBus 原理

class EventBus {
    constructor() {
        this.callbacks = {}
    }
    $on(name, fn) {
        this.callbacks[name] = this.callbacks[name] || [];
        this.callbacks[name].push(fn);
        console.log('on callback', this.callbacks)
    }
    $emit(name, args) {
        if (this.callbacks[name]) {
            this.callbacks[name].forEach(cb => cb(args));
        }
        console.log('emit callback', this.callbacks);
    }
    $off(name) {
        if (this.callbacks[name]) delete this.callbacks[name];
        console.log('off callback', this.callbacks)
    }
}
export default new EventBus();
### Vue事件总线(EventBus)的适用场景及用法 #### 适用场景 Vue事件总线适用于组件之间缺乏直接父子关系但仍需相互通信的情况。具体来说,在兄弟组件、祖孙组件以及完全不相关的组件间传递消息时非常有用[^1]。 #### 创建EventBus实例 为了建立一个全局可用的消息通道,可以在项目中单独定义一个新的JavaScript文件用于导出一个Vue实例作为事件中心: ```javascript // src/event-bus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` 接着在`main.js`里把此实例挂载至Vue原型上以便于在整个应用范围内访问: ```javascript // main.js import { EventBus } from './event-bus'; Vue.prototype.$eventBus = EventBus; ``` 这样做的好处是可以让任何地方都能方便地获取到这个共享的事件总线对象[^2]。 #### 发送与接收事件 当某个操作发生后想要通知其他部分做出响应,则可以利用 `$emit()` 方法来广播自定义事件;而目标位置则通过监听特定名称的事件(`$on()`)来进行相应的处理逻辑[^3]。 ##### 页面A触发事件 假设有一个按钮点击行为需要告知另一页面打开登录对话框: ```html <!-- PageA.vue --> <template> <button @click="triggerLogin">Open Login Dialog</button> </template> <script> export default { methods: { triggerLogin() { this.$eventBus.$emit('callLoginDialog'); } } } </script> ``` ##### 页面B监听并响应 而在负责显示登录界面的地方设置好对应的侦听器即可完成交互闭环: ```html <!-- PageB.vue --> <template> <!-- 登录表单等内容 --> </template> <script> export default { created() { this.$eventBus.$on('callLoginDialog', () => { console.log('Received request to show login dialog.'); // 执行展示模态框或其他动作... }); }, beforeDestroy(){ this.$eventBus.$off('callLoginDialog'); // 移除事件监听防止内存泄漏 } } </script> ``` 以上就是基于Vue框架下使用事件总线模式实现不同视图间的松耦合通讯方式的一个简单例子。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值