鸿蒙开发笔记-@Link父子双向同步传递数据

最新推荐文章于 2024-11-23 19:35:32 发布

鸿蒙笔记

最新推荐文章于 2024-11-23 19:35:32 发布

阅读量266

点赞数 2

文章标签：笔记鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/2301_79082288/article/details/141498260

版权

一、概述

使用 @Link 可以实现父组件和子组件的数据双向同步。

二、使用步骤

将父组件的状态属性传递给子组件；
子组件变量通过 @Link 修饰即可；

三、talk is cheap, show me the code

子组件代码

@Component
struct SonComponent {
  //@Link双向同步
  @Link count: number

  build() {
    Column() {
      Text('子组件')
      Text(this.count.toString())
      Button('子组件修改count')
        .onClick(() => {
          this.count += 2
        })
    }
    .backgroundColor(Color.Brown)
    .height(200)
    .width(200)
  }
}

父组件代码

@Component
struct Index {
  @State count: number = 1

  build() {
    Column() {
      Text('父组件')
      Text(this.count.toString())
      Button('父组件修改count')
        .onClick(() => {
          this.count++
        })

      //使用子组件
      SonComponent({
        count: this.count
      })
        .margin({ top: 50 })
    }
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}