HarmonyOS鸿蒙Next中ArkTS子组件如何向父组件传递数据？

HarmonyOS鸿蒙Next中ArkTS子组件如何向父组件传递数据？

父组件如何调用子组件方法，子组件如何调用父组件方法。

2 回复

在HarmonyOS鸿蒙Next中，ArkTS子组件向父组件传递数据可以通过自定义事件实现。具体步骤：

  1. 父组件定义事件处理函数
  2. 子组件使用@CustomEvent装饰器声明事件
  3. 子组件通过this.emitEvent触发事件并携带数据

示例代码片段：

父组件：

@Entry
@Component
struct Parent {
  handleChildEvent(data: string) {
    // 接收数据
  }
}

子组件：

@Component
struct Child {
  [@CustomEvent](/user/CustomEvent)('myEvent') myEvent: (data: string) => void

  onClick() {
    this.myEvent.emit('data from child')
  }
}

更多关于HarmonyOS鸿蒙Next中ArkTS子组件如何向父组件传递数据？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，ArkTS子组件向父组件传递数据主要通过以下方式：

  1. 自定义事件方式： 子组件通过@Event装饰器定义事件，父组件通过事件回调接收数据：
// 子组件
@Component
struct ChildComponent {
  @Event onDataChange: (data: string) => void

  build() {
    Button('发送数据')
      .onClick(() => {
        this.onDataChange('子组件数据')
      })
  }
}

// 父组件
@Entry
@Component
struct ParentComponent {
  @State receivedData: string = ''

  build() {
    Column() {
      ChildComponent({ onDataChange: (data: string) => {
        this.receivedData = data
      }})
      Text(`收到数据: ${this.receivedData}`)
    }
  }
}
  1. 父组件调用子组件方法： 使用@Link或@ObjectLink装饰器建立双向绑定：
// 子组件
@Component
struct ChildComponent {
  @Link value: string

  childMethod() {
    console.log('子组件方法被调用')
  }
}

// 父组件
@Entry
@Component
struct ParentComponent {
  @State data: string = ''
  childRef: ChildComponent = new ChildComponent()

  build() {
    Column() {
      ChildComponent({ value: $data, ref: this.childRef })
      Button('调用子组件方法')
        .onClick(() => {
          this.childRef.childMethod()
        })
    }
  }
}
  1. 子组件调用父组件方法： 通过回调函数方式实现：
// 父组件
@Entry
@Component
struct ParentComponent {
  parentMethod() {
    console.log('父组件方法被调用')
  }

  build() {
    Column() {
      ChildComponent({ onParentCall: this.parentMethod.bind(this) })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  private onParentCall: () => void

  build() {
    Button('调用父组件方法')
      .onClick(() => {
        this.onParentCall()
      })
  }
}

这些方法可以满足ArkTS组件间通信的基本需求，根据具体场景选择合适的方式即可。

回到顶部