鸿蒙Next中@Component两个页面回调如何实现

在鸿蒙Next开发中，使用@Component装饰器时，如何实现两个页面之间的回调通信？比如页面A跳转到页面B后，当页面B完成某些操作时需要将数据回传给页面A，具体应该怎么实现？能否提供示例代码说明这种跨页面回调的最佳实践？

2 回复

在鸿蒙Next中，用@Component装饰的页面可以通过aboutToAppear和aboutToDisappear实现回调。前者在页面显示时触发，后者在页面消失时调用。简单说，就像进门喊“我来了”，出门喊“我溜了”！记得别在回调里写太耗时的代码，不然用户会以为你卡在门口了。

更多关于鸿蒙Next中@Component两个页面回调如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，@Component装饰的页面可以通过生命周期回调函数来实现页面间的回调逻辑。以下是两种常见方式：

1. 使用页面生命周期回调

每个@Component页面都有aboutToAppear和aboutToDisappear等生命周期方法，可以在这些方法中处理回调逻辑。

@Component
struct FirstPage {
  @State message: string = 'Hello'

  aboutToAppear() {
    // 页面显示时的回调逻辑
    console.log('FirstPage about to appear')
  }

  aboutToDisappear() {
    // 页面消失时的回调逻辑
    console.log('FirstPage about to disappear')
  }

  build() {
    Column() {
      Text(this.message)
      Button('跳转到第二页')
        .onClick(() => {
          router.pushUrl({ url: 'pages/SecondPage' })
        })
    }
  }
}

@Component
struct SecondPage {
  aboutToAppear() {
    // 第二页显示时的回调
    console.log('SecondPage about to appear')
  }

  aboutToDisappear() {
    // 返回第一页时的回调
    console.log('SecondPage about to disappear')
  }

  build() {
    Column() {
      Text('第二页')
      Button('返回')
        .onClick(() => {
          router.back()
        })
    }
  }
}

2. 使用EventHub进行页面间通信

通过EventHub可以实现跨页面的事件通知和回调。

// 第一页
@Component
struct FirstPage {
  private eventHub: EventHub = new EventHub()

  aboutToAppear() {
    // 订阅事件
    this.eventHub.on('dataFromSecondPage', (data) => {
      console.log('收到第二页数据:', data)
    })
  }

  build() {
    Column() {
      Button('跳转到第二页')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/SecondPage',
            params: { eventHub: this.eventHub }
          })
        })
    }
  }
}

// 第二页
@Component
struct SecondPage {
  @State eventHub?: EventHub

  aboutToAppear() {
    // 获取传递的eventHub
    const params = router.getParams() as Record<string, Object>
    this.eventHub = params['eventHub'] as EventHub
  }

  build() {
    Column() {
      Button('发送数据回第一页')
        .onClick(() => {
          // 触发回调
          this.eventHub?.emit('dataFromSecondPage', { message: 'Hello from SecondPage' })
          router.back()
        })
    }
  }
}

关键点说明：

  • 生命周期回调：适用于页面显示/隐藏时的自动触发
  • EventHub：适用于需要主动传递数据的场景
  • 记得在aboutToDisappear中取消事件订阅，避免内存泄漏

选择哪种方式取决于具体业务需求：如果只是需要在页面切换时执行某些操作，使用生命周期回调；如果需要传递数据，建议使用EventHub。

回到顶部