ArkUI如何实现自定义组件传递点击事件

ArkUI如何实现自定义组件传递点击事件


HarmonyOS
2024-02-20 15:19:36
浏览
收藏 0
回答 2
回答 2
按赞同
/
按时间
rhlee
1

可参考示例代码。

示例代码

// xxx.ets 
import promptAction from '@ohos.promptAction'; 
 
@Entry 
@Component 
struct Index { 
  build() { 
    Row() { 
      Column() { 
        Widgets({ 
          onClickOK: (): void => { 
            promptAction.showToast({ message: 'test' }); 
          } 
        }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
 
@Component 
export default struct Widgets { 
  onClickOK?: () => void; 
 
  build() { 
    Row() { 
      Column() { 
        Button('事件') 
          .onClick(() => { 
            if (this.onClickOK !== undefined) { 
              this.onClickOK(); 
            } 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
分享
微博
QQ
微信
回复
2024-02-20 20:19:19
忙忙忙困困困
1

在ArkUI中实现自定义组件传递点击事件通常可以通过以下步骤来实现:

  1. 在自定义组件的模板中定义一个点击事件处理函数,例如:
<template>
  <div @click="handleClick">自定义组件内容</div>
</template>
  • 1.
  • 2.
  • 3.
  1. 在自定义组件的script部分中,实现handleClick方法,并通过$emit方法将点击事件传递出去,例如:
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-click');
    }
  }
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  1. 在使用自定义组件的父组件中,监听自定义组件传递出来的点击事件,并在父组件中处理点击事件,例如:
<template>
  <div>
    <custom-component @custom-click="handleCustomClick"></custom-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomClick() {
      console.log('自定义组件被点击了');
    }
  }
}
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

通过以上步骤,您可以实现在ArkUI中自定义组件传递点击事件的功能。您可以根据实际需求进行相应的定制和调整。希望这个解决方案对您有帮助。

分享
微博
QQ
微信
回复
2024-02-26 11:17:56


相关问题
js 自定义组件如何传递方法?
6704浏览 • 2回复 待解决
HarmonyOS ArkUI加载自定义组件
1091浏览 • 1回复 待解决
如何实现H5自定义事件
3366浏览 • 1回复 待解决
HarmonyOS UI组件自定义点击范围
1159浏览 • 1回复 待解决
HarmonyOS 自定义组件事件处理
1227浏览 • 1回复 待解决
HarmonyOS 组件是否支持自定义事件
798浏览 • 1回复 待解决
HarmonyOS 自定义StepperView组件如何实现
815浏览 • 1回复 待解决
ArkUI如何使用自定义字体
1907浏览 • 2回复 待解决