vue3利用ts使用EventBus
vue3使用EventBus。
·
event-bus.ts
/**
* 简易的发布订阅模式
* 主要用于跨组件通信
*/
class EventBus {
static list: { [key: string]: Array<Function> } = {};
// 订阅
static listen(name: EventTypeName, fn: Function) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
}
// 发布
static notify(name: EventTypeName, data?: any) {
if (this.list[name]) {
this.list[name].forEach((fn: Function) => {
fn(data);
});
}
}
// 取消订阅
static unListen(name: EventTypeName) {
if (this.list[name]) {
// delete this.list[name];
Reflect.deleteProperty(this.list, name);
}
}
// 只使用一次
// static once(name: EventTypeName, fn: Function) {
// const _this = this
// const wrapper = function () {
// fn.apply(this, [arguments])
// _this.unListen(name, wrapper)
// }
// this.notify(eventName, wrapper)
// }
}
export default EventBus;
/**
* 用于规范统一命名,减少名称不一致导致的错误
*/
export enum EventTypeName {
// 打开报告
OPEN_REPORT,
// 打开
OPEN,
}
EventBus.listen(EventTypeName.OPEN_REPORT, (data: any) => {
console.log('data :>> ', data);
let lti48Obj: any = {
1: "inspection", // 检验
2: "microorganism", //微生物
99: "check", // 检查
};
state.reportId = data.reportId; // 报告id
state.defaultValue = lti48Obj[data.lti48];
});
EventBus.notify(EventTypeName.OPEN_REPORT, row)
或者
EventBus.listen(EventTypeName.OPEN_REPORT, (data: Function) => {
data(row)
});
EventBus.notify(EventTypeName.OPEN_REPORT, (data: any) => {
let lti48Obj: any = {
1: "inspection", // 检验
2: "microorganism", //微生物
99: "check", // 检查
};
state.reportId = data.reportId
state.defaultValue = lti48Obj[data.lti48]
});
//销毁EventBus
onUnmounted(() => {
EventBus.unListen(EventTypeName.OPEN_REPORT);
});
更多推荐
已为社区贡献8条内容
所有评论(0)