HarmonyOS NEXT父组件如何调用子组件的方法?
2025-01-03 10:58:29
38次阅读
0个评论
问题描述:HarmonyOS NEXT父组件如何调用子组件的方法
应用场景:
父组件中有一个收藏话题列表,在父组件击取消收藏后,对应的子组件中的 收藏状态也需要同步更新,这里就涉及到:父组件中需要触发子组件的方法
解决方案一:
可以定义一个controller类,在controller类中定义和子组件中类型相同的方法,在子组件中将实际封装的方法给到controller。父组件在使用时,new一个controller对象然后传入子组件,在父组件中调用controller对应的方法即可。
参考代码:
@Component
struct Child {
@State private text: string = '初始值';
private controller: ChildController = new ChildController();
aboutToAppear() {
if (this.controller) {
// 给controller对应的方法赋值
this.controller.changeText = this.changeText;
}
}
private changeText = (value: string) => {
this.text = value;
}
build() {
Column() {
Text(this.text)
}
}
}
// 定义controller对象
class ChildController {
changeText = (value: string) => {
}
}
@Entry
@Component
struct Parent {
private ChildRef = new ChildController();
build() {
Column() {
Text('调用Child的changeText')
.fontSize('18vp')
.fontColor(Color.Gray)
Divider()
Child({ controller: this.ChildRef }) // 将new之后的controller对象传入子组件
Button('Parent调用child的changeText')
.onClick(() => {
this.ChildRef.changeText('Parent调用child的changeText');
})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
解决方法二
使用Emitter进行【线程间通信】:在父组件发送事件,子组件或其他组件里面监听事件和数据变化,来触发子组件里面的其他方法,这样也能实现父组件调用子组件;反之也能实现子组件触发父组件的方法
好处:可以跨组件, 注意:需要在公共文件里面订阅好 不同Emitter事件的不同eventId 标识,避免互相干扰
发布事件
import { emitter } from '@kit.BasicServicesKit';
// 定义一个eventId为1的发送事件,事件优先级为Low
let event: emitter.InnerEvent = {
eventId: 1,
priority: emitter.EventPriority.LOW
};
let eventData: emitter.EventData = {
data: {
content: 'c',
id: 1,
isEmpty: false
}
};
// 发送eventId为1的事件,事件内容为eventData
emitter.emit(event, eventData);
订阅事件
import { emitter } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';
const TAG: string = 'ThreadModel';
const DOMAIN_NUMBER: number = 0xFF00;
// 定义一个eventId为1的接收事件
let event: emitter.InnerEvent = {
eventId: 1
};
// 收到eventId为1的事件后执行该回调,这里就是编写其他函数
let callback = (eventData: emitter.EventData): void => {
promptAction.showToast({
message: JSON.stringify(eventData)
});
hilog.info(DOMAIN_NUMBER, TAG, 'event callback:' + JSON.stringify(eventData));
};
// 订阅eventId为1的事件,接收到数据后,立刻触发回调函数
emitter.on(event, callback);
promptAction.showToast({
message: JSON.stringify('emitter subscribe success')
});
00
- 0回答
- 0粉丝
- 0关注
相关话题
- Repeat:子组件复用
- 如何调用系统拍照并获取图片
- HarmonyOS Next 如何优雅的编写注释
- HarmonyOS NEXT跨多个组件之间如何进行数据通信?
- 【HarmonyOS Next开发】日历组件详细日界面组件
- 如何在长按手势回调方法里获取手指触摸点的坐标
- 如何实现跨文件组件复用
- Video组件如何播放图库内的某一个视频
- 【HarmonyOS NEXT】 ArkUI常用布局及组件库介绍
- 【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯
- 【HarmonyOS NEXT】如何给未知类型对象定义类型并使用递归打印所有的Key
- 【HarmonyOS NEXT】Tabs组件实现类微信(可滑动的)tabBar页签切换页面功能
- HarmonyOS NEXT实战:自定义封装多种样式导航栏组件
- 鸿蒙next 带你玩转搜索框组件 Search组件
- 【HarmonyOS NEXT】异步编程的神器之Promise