ArkTS #01# 组件通信

一、通过Prop单向传递

/*
* 单双向绑定都有
* 父组件@State，子组件@Link，孙组件@Prop
* 数据流向：父组件 <--> 子组件 --> 孙组件
 */

@Entry
@Component
export struct BothBinding {
  @State fatherValue: number = 0//表示组件中的状态变量，这个状态变化会引起 UI 变更

  build() {
    Column() {
      // ====================== 待补全 ===================
      Text('单双向绑定').fontSize(55)
      Text('faValue: ' + this.fatherValue).fontSize(55).fontWeight(500)
        .fontColor(Color.Red).backgroundColor(Color.Yellow)
        .margin({
          top: 35,
          bottom: 20,
        })
      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.fatherValue += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.fatherValue -= 2
          })
      }.margin({
        bottom: 20
      })

      sonComponent({
        sonVal: $fatherValue
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0x1E90FF)
  }
}

//子组件
@Component
struct sonComponent {
  @Link sonVal: number

  build() {
    Column() {
      Text(`sonVal: ${ this.sonVal}`).fontSize(53).fontColor(Color.Red).backgroundColor(Color.Yellow)
      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.sonVal += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.sonVal -= 2
          })
      }

      grandsonComponent({
        val: this.sonVal
      })
    }
  }
}

//孙组件
@Component
struct grandsonComponent {
  @Prop val: number
  build() {
    Column() {
      Text('sonSon = ' + this.val).fontSize(55)

      Row() {
        Button('+2').backgroundColor(Color.Pink).fontSize(55)
          .onClick(() => {
            this.val += 2
          }).margin({
          right: 40,
        })
        Button('减2').backgroundColor(Color.Transparent).fontSize(55)
          .onClick(() => {
            this.val -= 2
          })
      }
    }
  }
}

二、通过Provide/Consume共享数据

//@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。
//@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染。

@Entry
@Component
struct CompA {
  @Provide("reviewVote") reviewVotes: number = 0;

  build() {
    Column() {
      // ====================== 待补全 ===================
      Text('父组件值:' + this.reviewVotes).fontSize(55)
      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.reviewVotes++
        })
        Button('-').fontSize(55).onClick(() => {
          this.reviewVotes--
        })
      }

      CompB()
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0x1E90FF)
  }
}

// CompB
@Component
struct CompB {
  @Consume('reviewVote') xx: number

  build() {
    Column() {
      Text('子组件值' + this.xx).fontSize(55)

      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.xx++
        })
        Button('-').fontSize(55).onClick(() => {
          this.xx--
        })
      }

      CompC()
    }
  }
}

// CompC
@Component
struct CompC {
  @Consume('reviewVote') xx: number

  build() {
    Column() {
      Text('子子组件值' + this.xx).fontSize(55)

      Row() {
        Button('+').fontSize(55).onClick(() => {
          this.xx++
        })
        Button('-').fontSize(55).onClick(() => {
          this.xx--
        })
      }
    }
  }
}

三、监听器

// @Watch用于监听状态变量的变化
// @Watch注册一个回调方法onChanged， 当状态变量count被改变时， 触发onChanged回调。
//装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、
// @StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。

@Entry
@Component
struct watchBinding {
  @State @Watch('OnBasketUpdated') Num: number = 0
  @State Num2: number = 0

  OnBasketUpdated() {
    this.Num2 += 2
  }

  build() {
    Column() {
      Text('num1= ' + this.Num).fontSize(55)
      Text('num2= ' + this.Num2).fontSize(55)
      Row() {

        Button('num1 + 1').fontSize(55).onClick(() => {
          this.Num++
        })
      }
    }
  }
}