HarmonyOS 鸿蒙Next 在同一个被@component修饰的组件内部如何传递数据

HarmonyOS 鸿蒙Next 在同一个被@component修饰的组件内部如何传递数据

@Component
export default struct HomeComponent {
  @State farmBean: FarmBean = new FarmBean(1, '老张的玉米地', 22.5, 56, 30, 800, 25);
  @State Ifdetailshow: Boolean = false;
  private timerId: number = 0; //计时器id，每5秒读取一次数据

  @Builder ElementShow(name: String, detail: number) {
    Row() {
      Text(`${name}`)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
      Text(`${detail}`)
        .fontSize(20)
    }
    .width('95%')
    .justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder DetialShow() {
    if (this.Ifdetailshow) {
      Divider()
        .width('95%')
      Text('传感器数据')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Orange)
        .margin({ top: 10 })
      Divider()
        .width('95%')
      this.ElementShow('温度', this.farmBean.temperature)
      this.ElementShow('空气湿度', this.farmBean.humidity)
      this.ElementShow('二氧化碳', this.farmBean.co2)
      this.ElementShow('光照', this.farmBean.lumination)
      this.ElementShow('二氧化碳', this.farmBean.co2)
      this.ElementShow('土壤湿度', this.farmBean.soilHumidity)
    }
  }

  build() {
    Column({ space: 8 }) {
      Text('选择农田')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Orange)
        .margin({ top: 10 })
      Divider().width('95%')
      Row() {
        Select([
          { value: '一号田', icon: $r('app.media.leaf') },
          { value: '二号田', icon: $r('app.media.leaf') },
          { value: '三号田', icon: $r('app.media.leaf') },
          { value: '四号田', icon: $r('app.media.leaf') },
          { value: '五号田', icon: $r('app.media.leaf') }])
          .selected(0)
          .value('选择农田')
          .font({ size: 24, weight: 600 })
          .fontColor('#182431')
          .onSelect((index: number)=>{
            this.Ifdetailshow = true;
          })
      }
      .width('95%')
      .justifyContent(FlexAlign.SpaceBetween)
      Text(this.Ifdetailshow?'true':'false')

      this.DetialShow()
    }
  }
}

代码如上,为什么在onselect改变了变量Ifdetailshow的值，但是却传递不出去
(具体表现是Text(this.Ifdetailshow?'true':'false')这个语句执行出来输出为false,后面的this.DetialShow()函数也没有执行)

正确地在这个组件里面传递数据的方法是什么？

希望解答，感谢！

更多关于HarmonyOS 鸿蒙Next 在同一个被@component修饰的组件内部如何传递数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

@State ifdetailshow: boolean = false;

变量类型都用小写

更多关于HarmonyOS 鸿蒙Next 在同一个被@component修饰的组件内部如何传递数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


解决了，非常感谢！

在HarmonyOS鸿蒙Next中，通过@Component修饰的组件内部传递数据，可以使用[@State](/user/State)、[@Link](/user/Link)、[@Prop](/user/Prop)等装饰器来管理组件内部的状态和数据流。

  1. @State：用于组件内部的状态管理，当[@State](/user/State)修饰的变量发生变化时，会自动触发UI更新。例如：
@Component
struct MyComponent {
    [@State](/user/State) message: string = 'Hello, HarmonyOS!';

    build() {
        Column() {
            Text(this.message)
            Button('Change Message').onClick(() => {
                this.message = 'Message Changed!';
            })
        }
    }
}
  1. @Link：用于父子组件之间的双向数据绑定。父组件可以通过[@Link](/user/Link)将数据传递给子组件，子组件对数据的修改会同步到父组件。例如：
@Component
struct ParentComponent {
    [@State](/user/State) parentMessage: string = 'Message from Parent';

    build() {
        Column() {
            ChildComponent({ message: $parentMessage })
        }
    }
}

@Component
struct ChildComponent {
    [@Link](/user/Link) message: string;

    build() {
        Column() {
            Text(this.message)
            Button('Change Message').onClick(() => {
                this.message = 'Message Changed by Child!';
            })
        }
    }
}
  1. @Prop：用于单向数据传递，父组件传递给子组件的数据，子组件不能直接修改。例如：
@Component
struct ParentComponent {
    [@State](/user/State) parentMessage: string = 'Message from Parent';

    build() {
        Column() {
            ChildComponent({ message: this.parentMessage })
        }
    }
}

@Component
struct ChildComponent {
    [@Prop](/user/Prop) message: string;

    build() {
        Column() {
            Text(this.message)
        }
    }
}

通过这些装饰器，可以在@Component修饰的组件内部实现数据的传递和状态管理。

回到顶部