小程序父孙组件 孙触发事件传递给父组件 简单eventBus
2021/10/6 14:10:58
本文主要是介绍小程序父孙组件 孙触发事件传递给父组件 简单eventBus,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小程序父孙组件 孙触发事件传递给父组件 简单eventBus
- 环境:
ts
WeappEventBus.ts:事件公交回调类
interface CallBackObj { [index:string]: Function } class EventBus { private eventObj: CallBackObj = {} constructor() { console.log('event bus initing ...'); } /** * 创建回调函数, 同名会覆盖, {key: callback}必须都传 */ on(key: string, callback: Function): void { if(!(key && callback)) return; this.eventObj[key] = callback; } /** * 触发指定回调 */ emit(key: string, params: Array<any>): void { if (!key) return; this.eventObj[key](params); // 调用对象存储的方法并传参 } /** * 移除回调 * @param key * @returns */ remove(key: string): void { if (!key || !this.eventObj[key]) return; delete this.eventObj[key]; } } const eventBus = new EventBus; export { eventBus }
app.ts引入
// app.ts import { eventBus } from './utils/weappEventBus'; App<IAppOption>({ globalData: { bus: null }, onLaunch() { this.globalData.bus = eventBus; this.globalData.bus.on('xxx',(params: Array<any>) => { console.log(params); }) } })
孙组件.ts:模拟网络请求后孙组件传递事件给父组件
created(): void { setTimeout(() => { BUS.emit('xxx', { name: 'bill', age: 21 }); }, 1000); } pageLifetimes: { hide: function() { BUS.remove('xxx'); }, }
- 效果
这篇关于小程序父孙组件 孙触发事件传递给父组件 简单eventBus的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践