Vue自定义的组件@click失效

这篇博客探讨了在Vue中使用自定义组件时,@click事件失效的问题及其解决方案。错误示例显示直接在自定义组件上绑定的@click事件无法触发。正确的做法是使用@click.native修饰符,确保事件能在组件的根元素上被监听。了解这个关键知识点对于正确处理Vue组件事件至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue自定义的组件@click失效

错误示例

<template>
  <div>
    <Buttom text="确定" @click="handler()"></Buttom>
    <input type="button" @click="handler()" value="确定" />
  </div>
</template>

import { Component, Prop, Vue } from "vue-property-decorator";
import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
@Component({ name: "", components: { Buttom } })
export default class index extends Vue {
  handler() {
    alert("提示");
  }
}

描述

** 调用自定义组件上绑定的@click=“handler()” 事件不成功**

正确示例

<template>
  <div>
    <Buttom text="确定" @click.native="handler()"></Buttom>
    <input type="button" @click="handler()" value="确定" />
  </div>
</template>

import { Component, Prop, Vue } from "vue-property-decorator";
import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
@Component({ name: "", components: { Buttom } })
export default class index extends Vue {
  handler() {
    alert("提示");
  }
}

解释

如果你想在某个组件的根元素上绑定事件,直接使用 @click="handler()"是没法调用到原生onclick事件,所以vue提供了native 修饰符,通过native可以直接监听组件根元素的原生事件,我们可以添加native修饰符来实现click事件例如: @click.native=“handler()”,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值