HarmonyOS 多个Component之间可以相互调用方法吗

@Component
export struct A {
  funA() {
  }
}

@Component
export struct B {
  build() {
    Image().onClick(() => { // 这里如何执行到A中的funA方法？ } ) } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

HarmonyOS

fox280

2024-12-18 16:37:46

浏览

回答 1

按赞同

按时间

Heiang

对于两个或多个组件都需要使用到的某个功能，建议可以将该功能单独抽离出来进行封装成一个view模块或工具模块，在组件需要使用时分别导入该模块。

import { get, getA } from './IndexPage'

@Component
export struct getB {
  build() {
    Column() {
      Text().onClick(() => {
        // 这里如何执行到A中的funA方法？
        get([]);
      })
    }
  }
}

//IndexPage.ets
export function get(array:[]){
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
  }
}

export function getA(array:[]){
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

如果需要在B中变更A的组件属性可以使用@Link状态变化这种，参考下demo：

@Entry
@Component
struct Index {
  @State msg: string = "组件消息"

  build() {
    Column() {
      Text("page Index").fontSize(50).fontWeight(FontWeight.Bold)
      ComponentA({ msg: this.msg })
      ComponentB({ msg: this.msg })
    }
  }
}

@Component
export struct ComponentB {
  @Watch("changeData") @Link msg: string

  changeData() {
    console.log("ComponentB change")
  }

  build() {
    Text(this.msg).fontSize(50).fontWeight(FontWeight.Bold)
  }
}

@Component
export struct ComponentA {
  @Link msg: string

  build() {
    Column() {
      Text(this.msg).fontSize(50).fontWeight(FontWeight.Bold)
      Button("ComponentB change").onClick(() => {
        this.msg = "更新数据"
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.