vue自定义组件的点击事件失效

最新推荐文章于 2024-10-14 14:56:50 发布
原创 最新推荐文章于 2024-10-14 14:56:50 发布 · 957 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js

在Vue开发中，为减少代码重复，通常会将组件化。然而，在组件上添加点击事件时可能会遇到失效问题。正确做法是通过事件冒泡或自定义事件来处理。例如，使用`@click`指令确保事件正常触发。此外，理解组件通信原理也是避免此类问题的关键。

在vue开发过程中为了减少重复代码，很多时候都需要将重复的部分写成一个组件，方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写，事件则会失效：
在这里插入图片描述
正确写法应该是这样：
在这里插入图片描述

【uniapp踩坑记】Vue3监听点击事件竟然失效了？
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-08 411
如果这个组件是你自己封装的，或者你知道它内部有，那你可以用@click如果你不知道组件内部有没有触发click事件，或者你只是想监听原生 DOM 的点击，那就直接用@tapVue3 的语法是更清爽了，但像这种细节，如果你没仔细翻文档，真的会踩坑踩到怀疑人生。如果你也在从 Vue2 迁移到 Vue3，特别是在做 uniapp 项目的话，记得检查一下这些事件绑定写法，不然有可能 debug 半小时都找不到点不动的原因！想看更多 uniapp 实战、Vue3 迁移技巧，欢迎关注我的公众号代码简单说。
Vue配置项之生命周期（组件生命周期）
weixin_45134711的博客
06-12 1135
首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦
vue 自定义组件绑定的点击事件不生效
qq_58689048的博客
08-11 726
问题原因 vue 在自定义组件上绑定点击事件不生效 <Icon type="app-shezhi" @click="setFn"/>; 解决方法 最简单的做法，添加 .native修饰 <Icon type="app-shezhi" @click.native="setFn"/>;
Vue jsx onClick 点击事件无效，无法触发
japlus的博客
01-04 2170
在Vue3 环境中用@vue/babel-plugin-transform-vue-jsx 就会导致onClick 事件失效 Vue2 用 @vue/babel-plugin-transform-vue-jsx 插件 Vue3 用@vue/babel-plugin-jsx 插件
video标签进度条圆点多次点击会造成页面的所有点击事件失效
qq_26626159的博客
07-06 1641
如图所示，在ios微信端H5页面的video标签，如果多次点击圆点或反复拖动进度条，会造成页面上所有的点击事件失效解决办法： 给video绑定点击事件，当页面上所有按钮的点击事件失效后，会自动执行video的点击事件。...
【Vue踩坑合集】给自定义组件添加点击事件失效的问题
qq_43186285的博客
04-23 1010
问题描述： 今天在给自定义组件添加@click 点击事件时，发现添加的点击事件失效了，百度原因后才知道是和组件传递方法冲突了 解决方法 在自定义组件上添加原生事件得添加.native 来完成， 即 @click.native = "" <svg-icon class="breadcrumb-icon" :icon-class="'trun-left'" @click.native="changeColleapse()"></svg-icon> ...
Vue2中对子组件的自定义事件没有被正常触发的原因
2301_76488433的博客
08-21 453
这种写法，vue在编译为dom元素后，@myEvent会变成myevent。这样的话，在子组件中使用this.$emit('myEvent')时就会出现父组件中的doSomething()不能被调用。在vue2中使用自定义事件时，事件名有用到驼峰命名法（camelCase）时要注意，尽量别使用这种写法，不然会被警告，有时候可能导致事件不生效。
浅谈vue中组件绑定事件时是否加.native
10-16
因此，为了捕获自定义组件内部的DOM事件，我们必须明确指定`.native`，告诉Vue我们要监听的是底层DOM元素的事件，而不是自定义组件自身的事件。 3. `.native`修饰符的工作原理 Vue的事件系统采用了事件冒泡机制，...
解决vue 绑定对象内点击事件失效问题
10-18
在这个例子中，`handleNativeClick`方法将监听原生的点击事件，而不是Vue的自定义事件。 通过以上的解释，我们可以了解Vue中正确绑定点击事件的方式，并掌握如何在对象内处理点击事件失效的问题。希望这些知识点...
解决VUE双向绑定失效的问题
10-16
4. 使用自定义事件：当内置事件不能满足需求时，可以使用Vue的自定义事件来手动触发更新。 5. 调试工具：利用Vue的调试工具，如Vue DevTools，来监控数据和视图的状态，快速定位双向绑定失效的具体原因。 6. 阅读...
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
歌谣的博客
01-16 3572
[css] 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行 .item-codes{width:800px;word-break: break-all;white-space: normal;} 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
vue自定义组件click事件失效解决办法
FormAda的博客
03-18 2313
问题：自定义组件click事件失效 <quit @click="clickQuit()" v-if="show"></quit> 原因：根据vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。 解决办法：可以用@click.native=“click”解决 <quit @click.native="clickQuit()" v-if="show"></quit> ok！解决了！ ...
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
03-04 9436
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue2.0( 数据改动不生效，事件不触发的问题 )
qq_45623378的博客
09-23 933
vue 数据 事件不触发
vue视频插件video-player点击控制条也会触发暂停事件弹出蒙层
weixin_46276411的博客
05-08 1363
项目开发中遇到问题：触发暂停事件弹出蒙层，问题是点击进度条也会触发暂停事件弹出蒙层 基本代码 <video-player id="video" class="video video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPa
vue框架，使用video标签如何获取视频播放结束、开始播放、暂停播放、视频长度、视频播放进度的事件监听
weixin_69924839的博客
10-14 3907
一、视频播放结束的事件 二、视频开始播放的事件 三、视频暂停播放的事件 四、获取视频长度的事件
vue-video监听touch事件
weixin_30681615的博客
06-06 964
vue-video是基于 Vue 的简洁 HTML5 视频播放器组件，但是并没有监听touch事件，也就是说在移动端按键无效。 　　本文讲述如何改写其vue组件，使其兼容移动端。只需要在其原有的mouse事件上，再额外添加touch事件即可。 　　html部分 <div class="__cov-video-container" @mouseenter="mouseEnterVid...
vue 点击按钮弹出视频播放+自动播放问题
m0_61084021的博客
05-10 5386
点击弹出视频播放+进入页面视频不能自动播放问题
Vue3移动端web页面video标签使用及适配（点击或自动播放）
qq_43145310的博客
08-03 4845
video标签自动播放和点击播放
vue2纵向自动滚动组件点击事件失效
最新发布
12-29
### Vue2 中纵向自动滚动组件点击事件失效解决方案 在 Vue2 的开发过程中，遇到纵向自动滚动组件中的点击事件失效问题通常是由多种因素引起的。这类情况可能是由于样式冲突、JavaScript 事件绑定顺序不当或是框架...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值