子组件使用@Link修饰成员变量时,如何通过父组件传值

westinyang

沙发 发表于 2023-11-4 10:38:12

value: $value

清风明月

板凳 发表于 2023-11-9 09:42:26
子组件使用@Link接受父组件的值时,需要使用'$'建立变量之间的引用关系。才能实现同步。
代码示例
@Link语义是从'′操作符引出,即′操作符引出,即isPlaying是this.isPlaying内部状态的双向数据绑定。当单击子组件PlayButton中的按钮时,@Link变量更改,PlayButton与父组件中的Text和Button将同时进行刷新,同样地,当点击父组件中的Button修改this.isPlaying时,子组件PlayButton与父组件中的Text和Button也将同时刷新。
1.在父组件使用@State装饰器,传递数据使用$符创建引用。
  1. @Entry
  2. @Component
  3. struct Player {
  4.   @State isPlaying: boolean = false
  5.   build() {
  6.     Column() {
  7.       PlayButton({ buttonPlaying: $isPlaying })
  8.       Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18)
  9.       Button('Parent:' + this.isPlaying)
  10.         .margin(15)
  11.         .onClick(() => {
  12.           this.isPlaying = !this.isPlaying
  13.         })
  14.     }
  15.   }
  16. }
复制代码

2.在子组件使用@Link接受数据。
  1. @Component
  2. struct PlayButton {
  3.   @Link buttonPlaying: boolean

  4.   build() {
  5.     Column() {
  6.       Button(this.buttonPlaying ? 'pause' : 'play')
  7.         .margin(20)
  8.         .onClick(() => {
  9.           this.buttonPlaying = !this.buttonPlaying
  10.         })
  11.     }
  12.   }
  13. }
复制代码

Copyright   ©2023  OpenHarmony开发者论坛  京ICP备2020036654号-3 |技术支持 Discuz!

返回顶部