• 兄弟组件之前通信:
  • 方案1:状态提升,数据提升到父组件然后通过@Provide和@Consume下放。
  • 方案2: 状态提升,数据提升到父组件然后通过@Link下放。

CommunicationBetweenSiblingComponents.ets

@Component
struct SiblingB {
  // @Consume data: number;
  @Link data: number;

  build() {
    Column() {
      Text(`SiblingB ${this.data}`)
        .onClick(() => {
          this.data++;
        })
    }
    .padding(15)
    .border({ width: 5, color: Color.Orange })
  }
}

@Component
struct SiblingA {
  // @Consume data: number;
  @Link data: number;

  build() {
    Column() {
      Text(`SiblingA ${this.data}`)
        .onClick(() => {
          this.data++;
        })
    }
    .padding(15)
    .border({ width: 5, color: Color.Green })
  }
}


@Entry
@Component
struct CommunicationBetweenSiblingComponents {
  /**
   * 兄弟组件之前通信:
   * 方案1:状态提升,数据提升到父组件然后通过@Provide和@Consume下放。
   * 方案2: 状态提升,数据提升到父组件然后通过@Link下放。
   */
  // @Provide data: number = 0;

  @State data: number = 0;

  build() {
    Navigation() {
      Scroll() {
        Column({ space: 10 }) {
          Text(`父组件 ${this.data}`)
            .onClick(() => {
              this.data++;
            })
          SiblingA({
            data: this.data
          });
          SiblingB({
            data: this.data
          });
        }
        .padding(15)
        .border({ width: 5, color: Color.Red })
      }
      .width('100%')
      .height('100%')
    }
    .title('        兄弟组件之间通信')
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
  }
}

在这里插入图片描述

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐