Consume和Provide需要配合使用
Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。Consume在感知到Provide数据的更新后,会触发当前view的重新渲染。
适用场景:父组件包含子组件,子组件再包含子组件(父组件->子组件1->子组件2),组件存在多层嵌套,这时候我们需要父组件的状态更新传递到深处的子组件时,可以使用Consume和Provide配合来简单实现。
@Entry
@Component
struct Provider_page {
@Provide("reviewVote") reviewVotes : number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(`reviewVote: ${this.reviewVotes}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(() => {
// 修改@Provide装饰的变量,当前组件和包含@Consume的子组件都会被重新渲染
this.reviewVotes -= 1;
})
Provider_sub1_page()
}
.width('100%')
.height('100%')
}
}
@Component
struct Provider_sub1_page {
build() {
Row() {
Text(`xxxxxx`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Provider_sub2_page()
}
}
}
@Component
struct Provider_sub2_page {
// 当上层存在父组件修改reviewVote的值,当前组件会重新渲染
@Consume('reviewVote') reviewVotesub2: number;
build() {
Row() {
Text(`reviewVote: ${this.reviewVotesub2}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.onClick(() => {
// 修改@Consume装饰的变量,当前组件和包含@Provide的组件都会重新渲染
this.reviewVotesub2 += 1;
})
}
}
}