Vue3.0-eventBus组件传值-mitt

安装

npm官网:mitt - npm

npm install mitt

实例化导出

// 新建event.js

import mitt from 'mitt'
export default mitt()

引入

import event from "../event";

事件处理

// 发送
// 参数一:自定义事件名称
// 参数二:数据
event.emit(parameter,data)


// 接收
// 参数一:自定义事件名称
// 参数二:数据
event.on('parameter',data=>{

    console.log(data); //接收到的数据

})


// 移除
// 参数:自定义事件名称

event.off(parameter);


// 清除全部

event.all.clear()

### Vue3 中使用 EventBus 的方法 在 Vue3 中,由于官方不再内置 `EventBus` 功能,因此开发者需要手动创建一个独立的事件总线容器来实现组件之间的通信。以下是具体的方法以及最佳实践。 #### 创建 EventBus 容器 为了使多个组件能够通过同一个实例进行通信,首先需要创建一个单独的文件用于定义 `EventBus` 对象。通常会基于 `mitt.js` 或者原生 JavaScript 来构建这个对象[^3]。 ```javascript // event-bus.js 文件 import mitt from 'mitt'; const emitter = mitt(); export default emitter; ``` 此代码片段展示了如何利用第三方库 `mitt.js` 构建轻量级的事件管理工具。如果不想引入额外依赖,则可以直接使用纯 JavaScript 实现: ```javascript // pure-event-bus.js 文件 class EventEmitter { constructor() { this.events = {}; } on(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); } emit(event, data) { const callbacks = this.events[event]; if (callbacks && Array.isArray(callbacks)) { callbacks.forEach(cb => cb(data)); } } off(event, callback) { if (event === undefined || !Array.isArray(this.events[event])) return; let index = -1; if (callback !== undefined) { index = this.events[event]?.indexOf(callback); } else { delete this.events[event]; } if (index >= 0) { this.events[event].splice(index, 1); } } } const bus = new EventEmitter(); export default bus; ``` 上述两种方式都可以作为自定义 `EventBus` 的基础结构。 #### 发送与接收事件 一旦有了统一的 `EventBus` 实例,在任何地方都能轻松触发或者订阅特定名称下的消息通知。下面分别介绍发送方和接受方的操作流程[^2]: - **发送事件** 当某个条件满足时向其他部分广播数据变化情况: ```javascript // ComponentA.vue 组件内部某处逻辑 import emitter from './path/to/event-bus'; function notifyOtherComponents(message){ emitter.emit('custom-event', message); // 自定义事件名为 custom-event ,携带参数message } notifyOtherComponents("Hello world!"); ``` 这里演示了怎样借助之前声明好的全局变量emitter去分发一条新信息给所有正在等待该主题更新的对象们知道。 - **接收事件** 与此同时另一个完全不同的模块也可能对此感兴趣并希望得到即时反馈: ```javascript // ComponentB.vue 另外一处位置上设置侦听机制 import emitter from './path/to/event-bus'; onMounted(() => { emitter.on('custom-event', handleCustomMessage); }); beforeUnmount(() => { emitter.off('custom-event', handleCustomMessage); }) function handleCustomMessage(payload){ console.log(`Received Message: ${payload}`); } ``` 注意每次注册完监听之后记得清理掉对应的绑定关系以免造成内泄漏等问题发生。 #### 注意事项 尽管这种方法灵活方便但也在一些潜在风险需要注意规避: - 性能开销较大:随着项目规模增长过多无序地滥用此类模式可能导致性能瓶颈; - 调试困难度增加:缺乏清晰可见的数据流动路径使得追踪错误变得更加复杂棘手; - 生命周期管理不当容易引发资源浪费甚至崩溃现象;所以在实际开发过程中应当谨慎权衡利弊后再决定是否采用这种方式来进行跨层交互操作[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值