OpenHarmony开发者论坛

标题: 父组件如何与孙子组件进行状态同步？ [打印本页]
作者: Summer    时间: 2023-9-5 09:32
标题: 父组件如何与孙子组件进行状态同步？

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

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

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

示例代码一：
父组件中使用子组件，通过Provide提供reviewVote参数，供跨级传递给孙子组件。
  1. @Entry
  2. @Component
  3. struct Father{
  4.   @Provide("reviewVote") reviewVotes: number = 0;

  6.   build() {
  7.     Column() {
  8.       Son()
  9.       Button(`Father: ${this.reviewVotes}`)
  10.         ...
  11.     }
  12.   }
  13. }
复制代码

子组件中使用孙组件。
  1. @Component
  2. struct Son{
  3.   build() {
  4.     Column() {
  5.       GrandSon()
  6.     }
  7.   }
  8. }
复制代码

孙子组件中使用Consume来接受reviewVote的参数。
  1. @Component
  2. struct GrandSon{
  3.   @Consume("reviewVote") reviewVotes: number

  5.   build() {
  6.     Column() {
  7.       Button(`GrandSon: ${this.reviewVotes}`)
  8.         ...
  9.     }.width('100%')
  10.   }
  11. }
复制代码

代码示例二：
父组件Father使用@State绑定数据reviewVote。
  1. @Entry
  2. @Component
  3. struct Father {
  4.   @State reviewVotes: number = 0;

  6.   build() {
  7.     Column() {
  8.       Son({reviewVotes:$reviewVotes})
  9.       Button(`Father: ${this.reviewVotes}`)
  10.         ...
  11.     }
  12.   }
  13. }
复制代码

子组件Son中使用@Link接受由父组件Father传递的参数reviewVote。
  1. @Component
  2. struct Son{
  3.   @Link reviewVotes: number;
  4.   build() {
  5.     Column() {
  6.       Grandson({reviewVotes:$reviewVotes})
  7.     }
  8.   }
  9. }
复制代码

孙子组件GrandSon使用@Link接受由Son组件传递的参数reviewVote。
  1. @Component
  2. struct Grandson{
  3.   @Link reviewVotes: number;

  5.   build() {
  6.     Column() {
  7.       Button(`Grandson: ${this.reviewVotes}`)
  8.         ...
  9.     }.width('100%')
  10.   }
  11. }
复制代码





欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5