一、通过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++
})
}
}
}
}
标签:ArkTS,01,backgroundColor,55,Button,fontSize,onClick,组件 From: https://www.cnblogs.com/xkxf/p/18340762