vue自定义组件click点击事件无效处理办法

在Vue项目开发中,遇到组件click事件无法触发的问题,可以尝试以下解决方案:1) 使用`.native`修饰符,适用于简单场景;2) 对于复杂需求,可以通过计算属性`clickListeners`结合`$listeners`来实现,覆盖或添加自定义监听器。具体做法是在自定义组件内定义计算属性,将父组件的监听器与自定义的click事件合并,并在组件内部触发。
摘要由CSDN通过智能技术生成

在Vue项目中,通常需要用到封装组件,但是在给组件添加click事件时却发现无法执行,以下是常用的两种解决方案:
1、最简单的做法,添加 .native修饰,对于组件要求不高的情况下,使用此方法最为直接方便;
2、如果要求比较高,那么就试试添加 listeners:
首先给自定义组件绑定监听事件
<div class="xtItemContainer" v-on="clickListeners">自定义组件内容</div>
在自定义组件内添加
computed: { clickListeners: function () { let vm = this return Object.assign({}, // 我们从父级添加所有的监听器 this.$listeners, // 然后我们添加自定义监听器, // 或覆写一些监听器的行为 { // 这里确保组件配合 `v-model` 的工作 click: function (event) { console.log("监听事件"); vm.$emit('click', event.target) }, } ) }, }
现在再次在给此自定义组件绑定@click就可以了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值