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

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

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
相关问题
如何设置组件随子组件宽度变化
47浏览 • 1回复 待解决
组件如何处理子组件内点击事件
137浏览 • 1回复 待解决
如何选择Navigation 组件 Tabs 组件
80浏览 • 1回复 待解决
组件事件能否到传递组件
113浏览 • 1回复 待解决
如何设置组件不同状态下的样式
138浏览 • 1回复 待解决
Postgresql 宿主机如何Docker同步数据?
1944浏览 • 1回复 待解决
何设置组件不同状态下的样式
120浏览 • 1回复 待解决
手机如何电脑端进行数据传输
1172浏览 • 1回复 待解决
组件如何设置模糊效果
111浏览 • 1回复 待解决
XComponent是怎么native进行关联的?
254浏览 • 1回复 待解决
eTS中如何进行时间字符串转换?
1675浏览 • 1回复 待解决
如何获取组件刷新时间
43浏览 • 1回复 待解决
自定义组件嵌套子组件
7129浏览 • 3回复 待解决
鸿蒙如何调整组件位置
5789浏览 • 1回复 待解决
如何获取组件的属性信息
138浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
173浏览 • 1回复 待解决