问题：自定义的组件@click无效

最新推荐文章于 2025-03-28 14:49:20 发布
最新推荐文章于 2025-03-28 14:49:20 发布
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43620210/article/details/83861271
本文探讨了在Vue中自定义组件事件触发的局限性，提供了使用@click.native注册原生事件的解决方案，以确保能够正确触发元素级别的事件，避免组件自定义事件的限制。

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

原因：

自定义组件上注册的事件触发的是组件自定义的事件

解决方案：

使用@click.native注册元素的原生事件，用法和@click一样，或者对其进行改造，具体方法可以参考：https://www.jianshu.com/p/0a8a89687bb6

uniapp+vue3 小程序 click 事件和自定义事件没反应不触发的解决方法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-19 353
在 uniapp + Vue3 开发微信小程序时，可能会遇到 @click 或自定义事件无法触发的问题。尽管代码在 H5 和 App 端正常，但在小程序中点击事件无反应，且控制台无报错。
24、Ext JS 扩展与功能拓展：从自定义组件到表单小部件
最新发布
rrr55的博客
07-14 14
本文介绍了如何在 Ext JS 中开发自定义组件，如 ContactDetails、UserDetail 和 AddressDetail，并探讨了它们的拆分与复用。此外，还详细讲解了 Ext JS 提供的丰富表单小部件，包括 DateField、TimeField、NumberField、CheckboxGroups 和 RadioGroups，以及它们的优势、应用场景和使用方法。通过这些技术，可以构建功能强大且用户体验良好的应用程序。
vue 自定义组件@click无效
沐水莲心的博客
10-05 1687
vue 自定义组件@click无效 <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.j
vue @click不生效_Vue+element(v2.3.2)(第四期)
weixin_33741534的博客
01-26 461
1.挂载全局变量url1.新增url.jsletBASE_URL="https://xxx.com";exportdefault{BASE_URL}2.main.jsimportgolbal_URLfrom"./utils/url";Vue.prototype.$BASE_URL=golbal_URL;3.页面使用console.log(this.$BASE_UR...
点击事件@click 失效问题
qiaoqiaoBigBoss的博客
03-09 3263
问题： 在标签上设置点击事件@click，发现无法触发事件发生 原因： 发现这个标签上有个全局样式，对它造成了影响; pointer-event: none 解决： 将这个属性值改为auto即可 pointer-event: auto 结束 祝你今天好心情！！！ ...
关于Vue中@click不生效的问题
qq_39043714的博客
05-08 2185
关于Vue中@click不生效的问题 @click只能在div标签下才可以生效！
@click失效？@click.native
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-21 2716
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。
一个因@click.stop引发的bug的解决
12-11
在项目页面中使用 element popover，设置trigger=’click’时点击外部不会触发自动隐藏，但在 element 官网中是可以正常触发的（官方示例），项目中的菜单是自定义写的，所以怀疑是有黑魔法。 查找原因 将 popover...
runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of native event handler at <TextD onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > at <RouterView> at <App> warn$1 @ runtime-core.esm-bundler.js:51 logError @ runtime-core.esm-bundler.js:263 handleError @ runtime-core.esm-bundler.js:255 callWithErrorHandling @ runtime-core.esm-bundler.js:201 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:729 runtime-core.esm-bundler.js:268 Uncaught TypeError: There is no underlying STOMP connection at sendMessage (websocket.ts:30:18) at send (textD.vue:46:5) sendMessage @ websocket.ts:30 send @ textD.vue:46
04-03
同时，在组件卸载时执行清理操作，避免持有无效的引用。另外，全局错误处理可以增强应用的健壮性，但具体问题还需要在代码层面进行修复。 总结，用户的问题根源在于WebSocket连接管理不当和缺乏错误处理。需要指导...
uni-app:自定义键盘
m0_56600567的博客
03-28 1295
使用示例
在Vue中@click方法不起效
m0_52228992的博客
01-31 1763
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
@click失效了
weixin_35753291的博客
01-23 658
@click 代表的是 HTML 中的一个事件属性,它可以用来在用户点击元素时执行特定的 JavaScript 代码.如果 @click 失效了,可能是由于 JavaScript 代码有语法错误或者事件监听函数未正确绑定导致的.建议检查 JavaScript 代码并确保事件监听函数已正确绑定. ...
vue中@click绑定事件点击不生效
jiangjunyuan168的博客
10-24 1万+
原因： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 解决方法： 方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符） @click.native = "..." 方法2：向外发送click事件 添加 methods 内添加 _click 方法： methods: { _click: functi
使用element-ui后@click不生效问题
yhl_nsd的博客
12-10 1115
原因 Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。因此，在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。 解决方案 为 @click 添加标识符 .native。 <el-col :span="8" class="security" @click.native="refreshCode"> ...
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
vue父组件直接给子组件写click事件失效
朱宏的博客
07-23 1196
vue封装子组件，直接在父组件中写@click=function点击没反应，写 @click.native=function就可以了。 @click.native是给组件绑定原生事件
vue 点击事件失效
热门推荐
Hero_rong的博客
11-10 2万+
点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了 @click.stop="doSomething($event)" 2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native @click.native='setUp(index)' 3.如果项目中的某些组件，使用了
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 6030
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值