HarmonyOS 鸿蒙Next ArkUI如何实现自定义组件传递点击事件
HarmonyOS 鸿蒙Next ArkUI如何实现自定义组件传递点击事件
可参考示例代码。
示例代码
// xxx.ets
import promptAction from ‘@ohos.promptAction’;
struct Index {
build() {
Row() {
Column() {
Widgets({
onClickOK: (): void => {
promptAction.showToast({ message: ‘test’ });
}
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
export default struct Widgets {
onClickOK?: () => void;
build() {
Row() {
Column() {
Button(‘事件’)
.onClick(() => {
if (this.onClickOK !== undefined) {
this.onClickOK();
}
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
在HarmonyOS鸿蒙系统中，使用ArkUI（基于TypeScript或eTS的声明式UI框架）开发应用时，自定义组件传递点击事件通常可以通过事件绑定和事件派发机制来实现。
首先，在自定义组件内部，你需要定义一个点击事件处理函数，并在模板中使用@click等指令绑定到具体的UI元素上。例如：
@Entry
@Component
struct MyComponent {
@Builder myBuilder: MyBuilder
@Click('my-button')
onButtonClick(event: ClickEvent): void {
this.$emit('custom-click', event);
}
}
在父组件中，接收自定义组件的custom-click事件，并进行处理：
@Component
struct ParentComponent {
@Builder parentBuilder: ParentBuilder
onCustomClick(event: CustomEvent<ClickEvent>): void {
console.log('Custom click event received:', event);
}
}
在父组件的模板中，使用@custom-click绑定事件处理函数：
<MyComponent @custom-click="onCustomClick"></MyComponent>
以上步骤实现了自定义组件的点击事件向父组件的传递。确保事件名称、类型和传递方式正确无误。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
