HarmonyOS 鸿蒙Next arkTs父组件如何调用子组件里的方法呢？

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

HarmonyOS 鸿蒙Next arkTs父组件如何调用子组件里的方法呢？

arkTs父组件如何调用子组件里的方法呢？

使用react我们可以通过 useImperativeHandle、ref、useRef、forWardRef 通过给子组件传入ref，将子组件的方法绑定在ref上，通过这样父组件可以调用子组件的方法，artTs如何实现这样的功能呢？

尝试过使用emit在子组件里监听事件，父组件触发调用子组件方法，但是这种不符合目前我的应用场景

@Component struct parent { @State message: string = ‘Hello World’; build() { Row() { Text(this.message) Child() }
} }

@Component struct Child { toast () { console.log(888) } build() { Row() { Text(“666”) }
} }

如上，想在Parent组件中调用child组件中的 toast方法


更多关于HarmonyOS 鸿蒙Next arkTs父组件如何调用子组件里的方法呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
18 回复

使用export

更多关于HarmonyOS 鸿蒙Next arkTs父组件如何调用子组件里的方法呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这样就行了  
https://developer.huawei.com/consumer/cn/forum/topic/0202140470508418066?fid=0102683795438680754

子组件：

定义callback函数：

private changeCallback: (value: string, index: number) => void

比如在onChange事件上调用：

.onChange((value: string, index: number) => { this.changeCallback(value, index) })

父组件使用：CustomTextPicker为上面子组件名

// 处理子组件回调事件

onChangeMileTimeCallback(value: string, index: number) {
  console.log('xx ' + value + " index: " + index)
  AppStorage.SetOrCreate<string>("mileTime", value)
}

CustomTextPicker({select: 0, ranges: this.mileTimeLabels, changeCallback: this.onChangeMileTimeCallback})

你这个反了，人家是要父组件执行子组件的函数，callback这个是子组件触发的，

姓名: 张三 职位: 软件工程师 简介: 拥有超过10年的软件开发经验，熟悉多种编程语言和技术。

刚好不懂怎么把父组件的函数传给子组件，看到你这个很有帮助！

我想到的一个办法就是，父组件设置@State变量，子组件@Prop @Watch监控相同的变量，这样父组件改变这个变量，子组件就能观察到，然后子组件执行监控的回调方法就好了

参考文档

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-watch-0000001473697342-V3

期待HarmonyOS能继续优化多屏协同功能，让跨设备体验更加完美。

目前看只有这种事可行的，

https://developer.huawei.com/consumer/cn/forum/topic/0202140470508418066?fid=0102683795438680754

这方法好，很完美，很鸿蒙。

通过controller 关联，可以实现一个controller类，将它在父组件实例化，传给子组件，在子组件内注册事件监听，在父组件触发事件方法

能说下如何在子组件中注册监听事件吗，

如果不会写 event 事件注册与调用，就用 API 里面的 emitter ，子组件实现的是 on 方法，父组件调用的是 emit 方法，

https://laval.csdn.net/6583ebbcdafaf23eeaee2f18.html 这个

怎么就没有人回复使用Callback呢？

给你搜索一个论坛帖子，可以参加一下
https://developer.huawei.com/consumer/cn/forum/topic/0202998577488560444?fid=0102683795438680754

在HarmonyOS鸿蒙系统中，使用ArkTS（Ark TypeScript）开发时，父组件调用子组件里的方法可以通过引用子组件实例来实现。具体步骤如下：

  1. 获取子组件实例：在父组件中，通过$refs属性可以获取到子组件的实例。首先，在子组件标签上设置一个ref属性，该属性值为一个唯一标识符。

  2. 调用子组件方法：在父组件的逻辑中，通过this.$refs加上之前设置的ref属性值，即可访问到子组件的实例，进而调用其方法。

示例代码如下：

// 子组件 Child.ets
@Entry
@Component
struct Child {
    @State message: string = "Hello from Child";

    // 子组件方法
    showMessage() {
        console.log(this.message);
    }

    build() {
        // 子组件视图
        Row() {
            Text(this.message).fontSize(20)
        }
    }
}

// 父组件 Parent.ets
@Entry
@Component
struct Parent {
    @State childRef: any = null;

    callChildMethod() {
        if (this.childRef) {
            this.childRef.showMessage();
        }
    }

    build() {
        Column() {
            // 引用子组件实例
            Child().ref("childComponent")
            Button("Call Child Method")
                .onClick(() => this.callChildMethod())
        }
    }
}

在上述示例中，父组件Parent通过ref属性获取了子组件Child的实例，并通过this.$refs.childComponent.showMessage()调用了子组件的方法。

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

回到顶部