目前使用的方式有两种,一种是父子组件方法传递,一种是系统提供的emitter。
一、父子组件方法传递
1.1 使用场景
当我们父组件中有一个方法,需要子组件在修改完数据后回调父组件的方法时候。有点抽象:这样解释一下,父组件A中创建了子组件B,A中一个方法是需要B端更新数据后调用来刷新页面。这样我们就需要将A中的方法传递给子组件B。然后,B端改完数据后调用这个方法。
1.2 伪代码实现
//父组件A中的伪代码//A组件中的方法实现startCalcuteMoney() {//。。。。这里进行方法处理}build() {Column() {ListItem() {TopCellItem({startCalcute:this.startCalcuteMoney.bind(this)})}}
}//=========================================////子组件B中的伪代码@Component
struct TopCellItem {//接受父类传递的方法startCalcute:() => voidbuild() {Column(){Text('点击调用父组件方法').fontSize(20).onClick(() => {this.startCalcute()})}
}
比较好理解,不过需要注意的是父组件在传递给子组件方法的时候需要bind(this)。
当B组件TopCellItem点击Text的时候就可以回调父组件的方法了。
二、emitter
可以先看一下官方文档,解释的比较清晰。
2.1 使用场景
这个对于原生iOS开发来说就像notification通知,或者swift的EventBus。可以实现跨页面,跨组件的一对多的传递。例如主题设置,我在设置完主题颜色的时候,需要所有监听到的地方发生更改。这就需要用到emitter了。
2.2 伪代码实现
//发送信号的方法saveportfoilRate() {//发送信号let eventData = {data: { //发送的数据"rate": this.portfolioRate,}};let innerEvent = {eventId: 11, //发送的ID,需要跟监听方一致priority: emitter.EventPriority.HIGH};emitter.emit(innerEvent, eventData);}//=====================================================//监听信号的地方listenRateChange() {let innerEvent = {eventId: 11 //监听的ID,需要跟发送方一致};function EmitterCallback(eventData) {//处理收到的数据}emitter.on(innerEvent, EmitterCallback.bind(this));}
同样需要注意的是,在监听信号的地方需要bind(this)。
当组件A中调用发送信号的地方时候,组件B在监听的地方就可以收到了。需要注意的是需要先监听再发送。