PropAndLinkDemo.ets

@Component
struct Child {
  // 单向父传子@Prop可以初始化也可以不初始化。
  @Prop prop1?: number = 0;
  // 父子双向传递，@Link不能初始化。不能将@Link修饰的变量设为可选的。
  @Link link1: number;

  build() {
    Column() {
      Text(`儿子 ${this.link1}`)
        .fontSize(30)
      Button('儿子的按钮')
        .onClick(() => {
          this.link1++;
        })
      Grandson({
        propX: this.link1,
        linkX: this.link1
      });
    }
    .padding(15)
    .border({ width: 5, color: Color.Green })
  }
}

@Component
struct Grandson {
  @Prop propX: number = -1;
  @Link linkX: number;

  build() {
    Column() {
      Text(`孙子 propX: ${this.propX}`)
        .fontSize(30)
      Text(`孙子 linkX: ${this.linkX}`)
        .fontSize(30)
      Button('孙子的propX按钮')
        .onClick(() => {
          this.propX++;
        })
      Button('孙子的linkX按钮')
        .onClick(() => {
          this.linkX++;
        })
        .margin({ top: 5 })
    }
    .padding(15)
    .border({ width: 5, color: Color.Orange })
  }
}

@Entry
@Component
struct PropAndLinkDemo {
  @State num1: number = 1;

  build() {
    Navigation() {
      Scroll() {
        Column({ space: 10 }) {
          Text(`爷爷 ${this.num1}`)
            .fontSize(30)
          Button('爷爷的按钮')
            .onClick(() => {
              this.num1++;
            })
          Child({
            link1: this.num1
          });
        }
        .padding(15)
        .border({ width: 5, color: Color.Red })
      }

      Button('重置')
        .onClick(() => {
          this.num1 = 1;
        })
        .margin(5)
        .buttonStyle(ButtonStyleMode.EMPHASIZED)
        .width(150)
        .backgroundImage($r('app.media.tab_add'))
    }
    .title('@Prop和@Link的Demo')
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
  }
}