HarmonyOS 鸿蒙Next 父组件怎么调用子组件的方法

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 父组件怎么调用子组件的方法

在页面内，有两个tab，两个tab是消息列表，page的titleBar上有清空消息的按钮，page 如何调用 子tab里面的方法，让消息清空呢。 也就是 父组件怎么调用子组件的方法

有大佬知道吗？

Harmonyos Next教程
3 回复

可以将子组件的方法单独抽离出来

class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}
export let ChildRef = new ChildController()

下面是个参考示例,将该方法传给子组件,子组件的aboutToAppear方法会重写被父组件调用的的方法，然后在父组件中调用

[@Component](/user/Component)
struct Child {
  [@State](/user/State) private text: string = '初始值'
  private controller: ChildController = new ChildController();
  aboutToAppear() {
    if(this.controller) {
      this.controller.changeText = this.changeText
    }
    console.log('aaa')
  }
  private changeText = (value: string) =>{
    this.text = value
    console.log('bbb')
  }
  build() {
    Column() {
      Text(this.text)
    }
  }
}
class ChildController {
  changeText = (value: string) => {
    console.log('11111')
  }
}
export let ChildRef = new ChildController()
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Parent {
  // ChildRef = new ChildController()
  [@State](/user/State) noShow: boolean = false
  build() {
    Column() {
      Text('获取Child的exposeMethods!').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller: ChildRef })
      Child()
      Button('Parent调用childer的changeText').onClick(() => {
        ChildRef.changeText('Parent调用childer的changeText')
      })
    }
  }
}
跨文件不行

在HarmonyOS鸿蒙系统中，父组件调用子组件的方法可以通过引用子组件的实例来实现。以下是实现这一功能的基本步骤：

  1. 获取子组件实例：在父组件的代码中，通过@Ref装饰器或者this.$refs（取决于你使用的框架版本和语法）来获取子组件的实例。确保在子组件上设置了ref属性，以便父组件可以引用它。

  2. 调用子组件方法：一旦获取到子组件的实例，你就可以直接调用该实例上的方法。例如，如果子组件有一个名为myMethod的方法，你可以通过childComponentInstance.myMethod()来调用它。

  3. 注意事项：确保子组件的方法在父组件调用时是可见的，即子组件的方法不是私有的。同时，考虑到组件的生命周期，确保在调用子组件方法时，子组件已经被正确初始化和渲染。

  4. 示例代码（伪代码）：

    // 父组件
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Parent {
    @Ref('childRef') childComponent: ChildComponent;

    @Builder
    build() {
        // ...
        ChildComponent({ ref: 'childRef' })
        // ...
    }

    callChildMethod() {
        this.childComponent.myMethod();
    }
}

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部