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

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

HarmonyOS
2024-01-19 15:24:42
浏览
收藏 0
回答 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修改
分享
微博
QQ
微信
回复
2024-01-19 21:04:02
相关问题
组件组件使用@Link双向同步
935浏览 • 1回复 待解决
组件状态修改build渲染机制
973浏览 • 1回复 待解决
如何设置组件随子组件宽度变化
2282浏览 • 1回复 待解决
弹窗组件调用组件函数传递
1036浏览 • 1回复 待解决
组件调用子组件的方法
1258浏览 • 1回复 待解决
如何选择Navigation 组件 Tabs 组件
2617浏览 • 1回复 待解决