You need to enable JavaScript to run this app. Nativescript-vue 如何让自定义组件支持tap点击事件?
优惠活动
大模型
产品
解决方案
定价
更多

Nativescript-vue 如何让自定义组件支持tap点击事件?

自定义组件支持tap点击事件的实现方案

问题本质:Vue中自定义组件上绑定的事件默认监听的是组件内部主动触发的自定义事件,不会自动绑定到组件根元素的原生tap事件上,因此需要手动处理,可通过以下两种方案实现:

  • 方案1:子组件内部转发tap事件(推荐,调用体验和原生组件一致)
    修改自定义Item组件的代码,给根元素绑定tap事件,触发后向外emit同名tap事件即可:
<template>
  <FlexboxLayout 
    class="profile-item" 
    flexDirection="column"
    @tap="$emit('tap', $event)"
  >
    <label :text="text" />
    <label class="subtext" v-if="subtext" :text="subtext" />
  </FlexboxLayout>
</template>

<script>
export default {
  props: ['text', 'subtext']
}
</script>

采用该方案时,父组件的调用方式无需调整,和你期望的写法完全一致。

  • 方案2:父组件绑定事件时添加.native修饰符
    无需修改Item组件代码,仅调整父组件的调用写法,通过.native修饰符声明要将事件绑定到组件根原生元素上:
<Item text="Test" @tap.native="onItemTap" />

内容的提问来源于stack exchange,提问作者Philipp S.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.21 08:06:04