@Observed装饰器和@ObjectLink装饰器使用教程

实际开发过程中我们会经常遇到这样的场景，循环一个数组对象，然后点击某一行按钮修改属性的值。这时候就要用到@Observed装饰器和@ObjectLink装饰器

示例代码:

父组件

import { page1 } from './page1'

@Observed
class location {
  public name: string = ''
  public status: string = ''

  constructor(name: string, status: string) {
    this.name = name
    this.status = status
  }
}

@Entry
@Component
struct Index {
  @State data: location[] = [
    new location('北京', 'Y'), new location('上海', 'N'),
  ]

  build() {
    Column() {
      ForEach(this.data, (item: location, index) => {
        page1({
          item: item
        })
      })
    }
  }
}

子组件代码：点击按钮改变class里的status属性值

@Observed
class location {
  public name: string = ''
  public status: string = ''
}

@Component
export struct page1 {
  @ObjectLink item: location

  build() {

    Column() {
      Row() {
        Text(this.item.name)
          .layoutWeight(1)
        Text(this.item.status)
        Button('修改数据')
          .onClick(() => {
            this.item.status = this.item.status === 'Y' ? 'N' : 'Y'
          })
          .margin({ left: 15 })
      }.width('100%')
      .padding(20)
      .justifyContent(FlexAlign.SpaceBetween)

    }

  }
}

最终效果图