父子组件如何双向传递方法？

Question

父子组件如何双向传递方法，并且方法返回的是promise对象。

Answer 1

在鸿蒙开发中，可以通过在父组件中向子组件传递包含 Promise 返回值的方法，并在子组件中调用该方法并处理 Promise 的结果来实现双向传递方法且返回 Promise 对象。提供一个示例：

// 父组件
@Component
struct Parent {
  @State data: string = '';

  async parentMethod(): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Resolved value from parent');
      }, 2000);
    });
  }

  build() {
    Column() {
      Child({ method: this.parentMethod });
      Text(this.data);
    }
  }
}

// 子组件
@Component
struct Child {
  method: () => Promise<string>;

  async callParentMethod() {
    const result = await this.method();
    console.info('Result from parent method:', result);
    // 假设这里更新父组件的状态
    // 这里只是模拟，实际应用中可能需要通过事件等方式通知父组件更新状态
    return result;
  }

  build() {
    Column() {
      Button('Call parent method', () => {
        this.callParentMethod();
      });
    }
  }
}

Answer 2

可参阅父子双向同步章节子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定,@Link装饰的变量与其父组件中的数据源共享相同的值。如下将promise方法放入obj中:

interface  GetDate{
  getDate:()=>Promise<string>;
}

@Component
struct DateComponent {
  @Link selectedDate: Date;
  @Link getDate:GetDate;
  build() {
    Column() {
      Button(`child increase the year by 1`).onClick(() => {
        this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1)
      })
      Button('getData').onClick(async ()=>{
        const a = await this.getDate.getDate();
        console.log(a);
      })
      Button('child update the new date')
        .margin(10)
        .onClick(() => {
          this.selectedDate = new Date('2023-09-09')
        })
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.selectedDate
      })
    }

  }
}

@Entry
@Component
struct ParentComponent {
  @State parentSelectedDate: Date = new Date('2021-08-08');
  @State getDate:GetDate = {getDate: ()=>{return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve('结束')
    },2000)
  })}}
  build() {
    Column() {
      Button('parent increase the month by 1')
        .margin(10)
        .onClick(() => {
          this.parentSelectedDate.setMonth(this.parentSelectedDate.getMonth() + 1)
        })
      Button('parent update the new date')
        .margin(10)
        .onClick(() => {
          this.parentSelectedDate = new Date('2023-07-07')
        })
      DatePicker({
        start: new Date('1970-1-1'),
        end: new Date('2100-1-1'),
        selected: this.parentSelectedDate
      })

      DateComponent({ selectedDate:this.parentSelectedDate,getDate: this.getDate })
    }
  }
}