父组件如何与孙子组件进行状态同步？

显示全部楼层

【问题描述】
多级组件嵌套，如下图，A组件中使用到了B组件，B组件中使用了C组件，当A组件的状态变更，需要同步到C组件，请问如何实现？!

【运行环境】
硬件：rk3568； ROM: 3.2 Beta5； API 9

HmD

常见的父子组件通信有以下两种方式
●方式一（推荐）：使用@Provide和@Consume装饰器。在父组件使用@Provide，在孙子组件使用@Consume，可以实现父组件和孙子组件进行双向数据绑定。
●方式二：使用@State和@Link装饰器。在父组件使用@State，在每一层子组件（子组件和孙子组件）都使用@Link。

示例代码一：
父组件中使用子组件，通过Provide提供reviewVote参数，供跨级传递给孙子组件。

@Entry
@Component
struct Father{
@Provide("reviewVote") reviewVotes: number = 0;
build() {
Column() {
Son()
Button(`Father: ${this.reviewVotes}`)
...
}
}
}

复制代码

子组件中使用孙组件。

@Component
struct Son{
build() {
Column() {
GrandSon()
}
}
}

复制代码

孙子组件中使用Consume来接受reviewVote的参数。

@Component
struct GrandSon{
@Consume("reviewVote") reviewVotes: number
build() {
Column() {
Button(`GrandSon: ${this.reviewVotes}`)
...
}.width('100%')
}
}

复制代码

代码示例二：
父组件Father使用@State绑定数据reviewVote。

@Entry
@Component
struct Father {
@State reviewVotes: number = 0;
build() {
Column() {
Son({reviewVotes:$reviewVotes})
Button(`Father: ${this.reviewVotes}`)
...
}
}
}

复制代码

子组件Son中使用@Link接受由父组件Father传递的参数reviewVote。

@Component
struct Son{
@Link reviewVotes: number;
build() {
Column() {
Grandson({reviewVotes:$reviewVotes})
}
}
}

复制代码

孙子组件GrandSon使用@Link接受由Son组件传递的参数reviewVote。

@Component
struct Grandson{
@Link reviewVotes: number;
build() {
Column() {
Button(`Grandson: ${this.reviewVotes}`)
...
}.width('100%')
}
}

复制代码

父组件如何与孙子组件进行状态同步？精华

相关帖子

精彩评论1

父组件如何与孙子组件进行状态同步？ 精华

相关帖子

精彩评论1

父组件如何与孙子组件进行状态同步？精华