HarmonyOS 鸿蒙Next 如何像vue和react一样暴露方法

原因

因为本人现在是就职前端（react、vue）开发，迫于公司业务正在学习使用arkTs开发，但在学习过程中发现了一些问题。我发现在使用自定义组件时我无法获取组件的暴露的方法，个人认为这个在写组件时挺重要的，因此我闭关冥想了两天，自己实现一个demo,大佬可以帮我看看写的如何，欢迎留言。

解决方案

直接贴代码：

index.ets

Child组件

import test from './test'

export  type  exposeMethodsType = {
  changeText: (value:string) => void
}

@Component
struct Child {
  @State private text: string = '初始值'
  exposeMethods: (methods:exposeMethodsType) => void // 1.定义暴露方法的成员变量
  aboutToAppear() {
    // 2.在组件初始化时调用exposeMethods并通过参数的形式暴露成员方法changeText
    this.exposeMethods({
      changeText: this.changeText.bind(this)
    })
  }
  // 暴露的方法
  changeText(value:string) {
      this.text = value
  }

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

Parent组件

export let ChildRef:exposeMethodsType = null
@Component
@Entry
struct Parent {
  @State private ref: exposeMethodsType = null
  // 4.通过参数获取并赋值给ref
  onLoad(methods) {
    ChildRef = methods
    this.ref = methods
  }

  build() {
    Column() {
      Text('获取Child的exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      // 3.传入方法
      Child的({ exposeMethods: this.onLoad.bind(this) })
      Button('Parent调用childer的changeText').onClick(() => {
        this.ref.changeText('我被Parent调用了！')
      })
      test()
    }
  }
}

test.ets

在其他文件调用导出的ChildRef调用changeText修改Child

import {exposeMethodsType,ChildRef} from './Index'
@Component
export default  struct test {
  build(){
    Row(){
      Button('test调用childer的changeText').onClick(() => {
        ChildRef.changeText('我被test调用了！')
      })
    }
  }
}

结果

废除demo

@Component
struct Child {
  @Link  private items: number[];
  @State private text: string = 'sdad'
  @Link private  getInstance: Child
  onLoad:() => void
  aboutToAppear() {
    this.getInstance = this
    this.onLoad()
  }

  changeText() {
    setTimeout(() => {
      this.text = 'ccc'
    },3000)
  }

  build() {
    Column() {
      Text(this.text)
      Button(`Button1: push`).onClick(() => {
        this.items.push(this.items.length + 1);
      })
      Button(`Button2: replace whole item`).onClick(() => {
        this.items = [100, 200, 300];
      })
    }
  }
}

@Entry
@Component
struct Parent {
  @State arr: number[] = [1, 2, 3];
  @State readonly ref: Child = null
  onLoad() {
    this.ref.changeText()
    // this.ref.
    // this.ref = new Child()
  }
  build() {
    Column() {
      Child({ items: $arr, getInstance: $ref,onLoad: this.onLoad.bind(this)})
      ForEach(this.arr,
        item => {
          Text(`${item}`)
        },
        item => item.toString()
      )
      Button('点我').onClick(() => {
        this.ref.changeText()
      })
    }
  }
}