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

HarmonyOS

commonli

2024-01-19 15:24:42

浏览

回答 1

待解决

回答 1

按赞同

按时间

szdino2

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

代码示例一

步骤 1 父组件中使用子组件，通过Provide提供reviewVote参数，供跨级传递给孙子组件。

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

步骤 2 子组件中使用孙组件。

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

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

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

代码示例二

步骤 1 父组件Father使用@State绑定数据reviewVote。

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

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

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

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

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

已于2024-1-19 21:08:53修改