arkts子组件调用父组件的方法api10+

最新推荐文章于 2024-06-13 09:57:54 发布

-Colin

最新推荐文章于 2024-06-13 09:57:54 发布

阅读量378

点赞数 2

分类专栏：鸿蒙开发文章标签： harmonyos 组件 arkts

本文链接：https://blog.csdn.net/gsrkuang/article/details/138033483

版权

鸿蒙开发专栏收录该内容

17 篇文章 3 订阅

订阅专栏

最近都在开发鸿蒙next的应用，记录下来关于子组件调用父组件的方法

以Tabs为例

首先父组件是Index，里面有一个子组件mainView，实现mainView调用了父组件changeTab的方法。


@Entry
@Component
struct Index {
  private tabsController: TabsController = new TabsController()

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
        TabContent() {
          mainView({
            //实现跳转
            changeTab: (index:number) => {
              this.changeTab(index)
            }
          })

        }.tabBar('概览').backgroundColor(Color.Pink)

        TabContent() {
          DeviceInfoView()
        }.tabBar('设备')

      }
      .vertical(false).scrollable(true).barMode(BarMode.Fixed)
      .barWidth('100%').barHeight('10%').animationDuration(400).scrollable(true).barMode(BarMode.Scrollable)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .width('100%').backgroundColor(0xF5F5F5)

    }.width('100%').height("100%")
  }

  changeTab(index: number) {
    this.tabsController.changeIndex(index)
  }

}

mainView 子组件

@Entry
@Component
struct mainView {

  changeTab?: (index: number) => void

  build() {
    Row() {
      Column() {
        Button().onClick(()=>{
          //根据你提供的index
          this.changeTab!(1)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

我建了一个鸿蒙开发者交流群，欢迎大家加入交流鸿蒙开发