在HarmonyOS NEXT开发中多个Component之间可以相互调用方法吗？

Question

在HarmonyOS NEXT开发中多个Component之间可以相互调用方法吗？
问题描述

@Component 
export struct A { 
  funA() { 
  } 
} 
 
@Component 
export struct B { 
  build() { 
    Image().onClick(() => { // 这里如何执行到A中的funA方法？ } ) } }

Answer 1

对于两个或多个组件都需要使用到的某个功能，建议 可以将该功能单独抽离出来进行封装成一个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]; 
  } 
}

如果需要在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 = "更新数据" 
      }) 
    } 
  } 
}