鸿蒙Next开发中，子组件如何修改父组件中的属性呢？

在鸿蒙Next开发中，子组件如何修改父组件的属性？比如父组件有一个状态变量，子组件需要触发更新，但直接修改会报错。有没有标准的方法实现这种通信？最好能提供具体代码示例。

2 回复

鸿蒙Next里子组件想改父组件的属性？简单！用@State装饰父组件的属性，然后通过@Link或@Prop传给子组件。子组件就能愉快地修改了，父组件还会自动更新！就像儿子喊老爸起床——一喊就醒！

更多关于鸿蒙Next开发中，子组件如何修改父组件中的属性呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）开发中，子组件修改父组件的属性通常通过以下两种方式实现：

1. 使用@State和@Link装饰器

  • 父组件：使用[@State](/user/State)装饰器定义状态变量，并通过[@Link](/user/Link)传递给子组件。
  • 子组件：通过[@Link](/user/Link)接收父组件的状态变量，直接修改即可同步更新父组件。

示例代码：

// 父组件
[@Component](/user/Component)
struct ParentComponent {
  [@State](/user/State) message: string = 'Hello'

  build() {
    Column() {
      Text(this.message)
      ChildComponent({ msg: $message }) // 使用$传递[@State](/user/State)变量
    }
  }
}

// 子组件
[@Component](/user/Component)
struct ChildComponent {
  [@Link](/user/Link) msg: string // 通过[@Link](/user/Link)接收

  build() {
    Button('修改父组件属性')
      .onClick(() => {
        this.msg = 'Modified by Child' // 直接修改，父组件同步更新
      })
  }
}

2. 通过自定义回调函数

  • 父组件：定义回调方法，通过[@State](/user/State)管理状态，并将回调方法传递给子组件。
  • 子组件：调用父组件的回调方法来间接修改属性。

示例代码：

// 父组件
[@Component](/user/Component)
struct ParentComponent {
  [@State](/user/State) message: string = 'Hello'

  // 定义回调方法
  updateMessage(newMsg: string) {
    this.message = newMsg
  }

  build() {
    Column() {
      Text(this.message)
      ChildComponent({ onUpdate: this.updateMessage.bind(this) })
    }
  }
}

// 子组件
[@Component](/user/Component)
struct ChildComponent {
  private onUpdate?: (msg: string) => void // 接收回调函数

  build() {
    Button('修改父组件属性')
      .onClick(() => {
        this.onUpdate?.('Modified via Callback')
      })
  }
}

总结：

  • @Link方式：适合直接状态绑定，代码简洁。
  • 回调函数方式：适合复杂逻辑或需要额外处理的情况。

根据具体场景选择合适的方法即可。

回到顶部