vue 使用 eventBus

本文介绍了一种在Vue项目中实现全局事件总线的方法,通过定义和导出一个安装函数,可以在项目的main.js文件中引入并使用。这种方式简化了组件间的通信过程,避免了繁琐的父子组件传参。

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

文件 vue-bus.js

const install = function (Vue) {
    const Bus = new Vue({
        methods: {
            emit (event, ...args) {
                this.$emit(event, ...args);
            },
            on (event, callback) {
                this.$on(event, callback);
            },
            off (event, callback) {
                this.$off(event, callback);
            }
        }
    });
    Vue.prototype.$bus = Bus;
};

export default install;

使用:

在 main.js 引入 

import VueBus from './vue-bus';

Vue.use(VueBus);

其他地方就可以使用了,使用方式如下:

this.$bus.$emit

this.$bus.$on   一般在created阶段

this.$bus.$off   一般在beforeDestroy阶段

 

### Vue.js 中 EventBus使用教程 #### 创建全局 Event Bus 为了简化组件间的通信,在 Vue 项目中可以创建一个全局的 `EventBus`。这可以通过实例化一个新的 Vue 对象并将其挂载到 Vue 原型链上来实现,从而使得所有的 Vue 组件都可以访问这个共享的事件总线[^1]。 ```javascript // main.js 或入口文件中定义全局EventBus var EventBus = new Vue(); Object.defineProperty(Vue.prototype, '$bus', { get: function () { return EventBus; } }); ``` 这样做的好处在于任何地方只需要通过 `this.$bus` 就能获取到该全局对象,而无需再单独导入其他模块。 #### 发送与接收自定义事件 当需要触发某个特定的操作时,可以在源组件里调用 `$emit()` 方法来广播一条消息给目标组件;而在目的端,则利用 `$on()` 来订阅感兴趣的事件名称及其处理逻辑[^2]。 - **发送事件** 在想要发出通知的地方执行如下代码: ```javascript this.$bus.emit('eventName', payload); // 'eventName' 是要发布的事件名字,payload 可选参数用于携带数据 ``` - **接收事件** 于希望响应此信号的位置设置侦听器: ```javascript this.$bus.on('eventName', callbackFunction); ``` 其中 `callbackFunction` 应是一个接受至少一个参数的方法,用来接收由发布者传递过来的数据。 #### 完整示例展示 下面给出一段完整的例子说明如何在一个简单的 Vue 应用程序内部运用上述机制完成跨组件的消息交换功能[^3]。 假设有一个父级容器包含了两个子部件 A 和 B ,现在想让 A 向 B 发送更新请求。 ##### 子组件A (Sender) ```html <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$bus.emit('message-from-a', { message: 'Hello from Component A!' }); } } } </script> ``` ##### 子组件B (Receiver) ```html <template> <div>{{ receivedMessage }}</div> </template> <script> export default { data() { return { receivedMessage: '' }; }, created() { this.$bus.on('message-from-a', ({ message }) => { this.receivedMessage = message; }); } }; </script> ``` 以上即为基于 Vue.js 构建的应用程序间采用事件驱动模式来进行交互的一种常见做法——借助内置工具构建轻量级的消息中心(EventBus),它不仅易于理解和上手操作而且能够有效减少不必要的依赖关系复杂度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值