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: numberbuild() {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: numberbuild() {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: numberbuild() {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: numberbuild() {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 = 0OnBasketUpdated() {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++})}}}
}