HarmonyOS 咨询一下Tab中的一些写法？

Question

Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')

  TabContent() {
    Text('发现的内容').fontSize(30)
  }
  .tabBar('发现')

  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

这种写法和下列的这种写法差别是什么？

Tabs({ index: this.currentIndex }) {
  TabContent() {
    DiscoverView()
  }

  TabContent() {
    LearningView({ learnedId: $learnedId })
  }

  TabContent() {
    MapView()
  }

  TabContent() {
    ConferenceView()
  }

  TabContent() {
    MineView()
  }
}
.layoutWeight(1)
.barHeight(0)
.scrollable(false)
.onChange((index) => {
  this.currentIndex = index;
  ContinueModel.getInstance().data.mainTabIndex = index;

  if (AppStorage.get('audioPlayerStatus') !== AudioPlayerStatus.IDLE) {
    AudioPlayerService.getInstance().stop().then(() => {
      AudioPlayerService.destroy();
    });
  }
})

CustomTabBar({ currentIndex: $currentIndex })
}
  .width(AppConstants.FULL_PERCENT)
  .height(AppConstants.FULL_PERCENT)
  .backgroundColor((this.currentBreakpoint === BreakpointTypeEnum.LG && this.currentIndex === TabBarType.MINE) ?
  $r('app.color.clear_color') : $r('sys.color.ohos_id_color_sub_background'))

这个CustomTabBar({ currentIndex: $currentIndex })自定义组件为什么可以在Tabs的闭包外跟Tabs进行联动呢？

Answer 1

CustomTabBar({ currentIndex: $currentIndex })是因为currentIndex和CustomTabBar的属性进行了双向绑定在CustomTabBar中改变这个属性的值也会影响到MainPage的变化，而MainPage中的currentIndex又与Tabs({ index: this.currentIndex })进行了一个索引绑定操作因此带动了整个页面的刷新和跳转。