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

HarmonyOS

liqi399

2024-02-20 15:19:36

浏览

回答 2

待解决

回答 2

按赞同

按时间

rhlee

可参考示例代码。

示例代码

// 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%') 
  } 
}

2024-02-20 20:19:19

忙忙忙困困困

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

在自定义组件的模板中定义一个点击事件处理函数，例如：

<template>
  <div @click="handleClick">自定义组件内容</div>
</template>

在自定义组件的script部分中，实现handleClick方法，并通过$emit方法将点击事件传递出去，例如：

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-click');
    }
  }
}
</script>

在使用自定义组件的父组件中，监听自定义组件传递出来的点击事件，并在父组件中处理点击事件，例如：

<template>
  <div>
    <custom-component @custom-click="handleCustomClick"></custom-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomClick() {
      console.log('自定义组件被点击了');
    }
  }
}
</script>

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