
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源
去关联
简单的变量传值:OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM
若我们多组件之间要传值,一层层传递下去有点麻烦;我们可以用@Consume和@Provide进行跨组件传值
class Data {
playNum: number //播放量
constructor(playNum: number) {
this.playNum = playNum
}
}
Entry部分
@Provide("provide_data") data: Data = new Data(11)
子组件部分
@Consume("provide_data") data: Data;
类似上去
==注意:列表新增UI会刷新,但内部对象属性改变不会引起刷新==
class Data {
playNum: number //播放量
constructor(playNum: number) {
this.playNum = playNum
}
}
@Entry
@Component
struct CompA {
@Provide("provide_data") data: Data = new Data(11)
@Provide("provide_list") dataList: Data[] = [
{ playNum: 0, },
{ playNum: 1, },
{ playNum: 2, },
{ playNum: 3, }
]
aboutToAppear() {
}
build() {
Column() {
Text('简单数据类型').fontSize(24).fontColor('#FF0000')
Text('利用@Consume和@Provide').fontSize(24).fontColor('#FF0000')
Text('跨组件传值').fontSize(24)
Text('单个对象内部改变').fontSize(24).margin({ top: 20 })
Row() {
Column() {
Button(`Entry:${this.data.playNum}`).fontSize(22)
.onClick(() => {
this.data.playNum += 1
})
}
}
Com2()
Text('列表改变').fontSize(24).margin({ top: 20 })
Text('列表新增UI会刷新,但内部对象属性改变不会引起刷新').fontSize(24).margin({ top: 20 }).fontColor('#FF0000')
Row() {
Column() {
Button(`Entry:减少一个`).fontSize(12)
.onClick(() => {
this.dataList.pop()
})
ForEach(this.dataList, (item: Data) => {
Button(`Entry:${item.playNum}`).fontSize(12)
.onClick(() => {
item.playNum += 1
})
}, item => JSON.stringify(item))
}
ComList2()
}
}
.width('100%').margin({ top: 20 })
}
}
@Component
export struct Com2 {
@Consume("provide_data") data: Data;
build() {
Column() {
Row() {
Button(`子组件2:${this.data.playNum}`).fontSize(20)
.onClick(() => {
this.data.playNum += 1;
})
Com3()
}
}
}
}
@Component
export struct ComList2 {
@Consume("provide_list") dataList: Data[]
build() {
Row() {
Column() {
Button(`ComList2:新增一个`).fontSize(12)
.onClick(() => {
this.dataList.push( { playNum: 0, })
})
ForEach(this.dataList, (item: Data) => {
Button(`ComList2:${item.playNum}`).fontSize(12)
.onClick(() => {
item.playNum += 1
})
}, item => JSON.stringify(item))
}
ComList3()
}
}
}
@Component
export struct Com3 {
@Consume("provide_data") data: Data;
build() {
Column() {
Row() {
Button(`子子组件3:${this.data.playNum}`).fontSize(20)
.onClick(() => {
this.data.playNum += 1;
})
}
}
}
}
@Component
export struct ComList3 {
@Consume("provide_list") dataList: Data[]
build() {
Column() {
Button(`ComList3:新增一个`).fontSize(12)
.onClick(() => {
this.dataList.push( { playNum: 0, })
})
ForEach(this.dataList, (item: Data) => {
Button(`ComList3:${item.playNum}`).fontSize(12)
.onClick(() => {
item.playNum += 1
})
}, item => JSON.stringify(item))
}
}
}