vue @click失效？@click.native

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43329956/article/details/112497264
版权

今天写vue用的iview的组件，Tag。但是，@click事件不好使了，然后，对应的解决方案是：用@click.native

<Tag color=“warning” v-else-if=“row.endStatus==4” @click.native=“lookDetail(row)”>一个标签

1，给vue组件绑定事件时候，加上native ，否则会认为监听的是来自Item组件自定义的事件
2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)

叶梓啊
关注
专栏目录
@click失效？@click.native
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-21 2348
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。
[iview] ivew标签页点击事件，将点击TabPane标签时对应的参数传给Tabs标签
Java学习
03-05 1万+
ivew的TabPane加@click和@click.native以及@on-click:&amp;quot;&amp;quot; 是无法触发点击事件的 而我们只能在Tabs标签上添加@on-click=“”， 但我们需要把赋值给TabPane标签的id传到后台 然后台再跟据id查询所需要的内容 我们只需要将id赋值给TabPane 标签的name值 然后在Tabs标签中使用value与其对应即可 例： 在kindOfNotic...
vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了 一直是红色的报错状态
qq_27806371的博客
07-20 365
vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了 一直是红色的报错状态 使用trigger: 'blur|change' 即可解决。
【无标题】el-dropdown-item @click.native无效
qq_54358705的博客
05-15 299
在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上navtive修饰符才能生效，navtive可以监听根元素的原生事件。注意不要把点击事件添加到el-dropdown-item包裹的元素上了（上述代码中的span），不然点击span以外的区域也莫得反应。链接：https://www.jianshu.com/p/f42c5f93c432。这种情况改为@click.native即可。
解决vue组件中click事件失效的问题
10-16
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue组件中添加click事件无效，@click.native也无效
weixin_71588037的博客
11-08 2838
在vue组件中添加click事件无效，@click.native也无效
今天遇到的bug——vue组件中添@click失效
m0_47807991的博客
04-14 3050
今天遇到了一个非常蠢的bug，在vue组件中添加click事件无效，@click.native也无效 想添加一个click事件来切换歌曲 <div class="playlist"> <div class="playItem" v-for="(item,i) in playlist.tracks" :key="item.id" @click="setPlayIndex(i)"></div> </div> 结果click事件一直无效，试了@cli
Vue中@click事件无效？@click.native中.native的含义和使用
weixin_44370837的博客
01-25 9141
记录@click绑定事件的一个坑 问题描述： 今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。 代码如下： <template> <div> <span>父组件页面</span> <search @click="onSubmit"></search> </div> </template> <script> methods: { onSubmit() { alert('sh
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
03-04 8175
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
一个因@click.stop引发的bug的解决
10-17
总结来说，本文主要讲解了如何解决一个由`@click.stop`修饰符引发的问题，涉及到了前端事件冒泡、Vue组件的事件处理以及Element UI Popover组件的工作机制。通过深入理解和分析，我们成功地找到了问题的原因，并给出...
click.native和@click区别
10-26
@click监听的是Vue组件内部元素的click事件，并且会阻止默认行为和事件冒泡，而@click.native可以监听DOM元素的原生click事件，不会经过better-scroll等组件的处理，因此能够正常响应用户的点击操作。因此，在使用...
element在el-row 或者 el-col 上使用@click失效
yimeichengxuyuan的博客
05-11 1627
使用element标签时注意！ 问题： 写项目的时候使用element-ui中el-row时，发现直接用@click="fn"无法触发点击事件，在其内部或者外部加上自己写的html标签（如：div、span）是生效的。 //不生效代码 <el-row class="register" @click="goRegister()"> 还没有账号，去注册</el-row> 改正： el-row,el-col上的点击事件需要加.native,就可以实现点击事件 //生效 <el-
vue 双击dblcilck事件不生效 加.native报错 解决方法如下
来了波，兄嘚
02-13 1625
vue 双击dblcilck事件不生效 加.native报错 解决方法如下
Vue中@click.stop与@click.prevent、@click.native
qq_40925546的博客
06-21 8498
Vue中@click.stop与@click.prevent、@click.native
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2290
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
在Vue中@click方法不起效
m0_52228992的博客
01-31 1292
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
vue @click.native 原生点击事件
热门推荐
chenjin_chenjin的博客
07-23 1万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） 2，等同于在自组件中：    子组件内部处理click事件然后向外发送click事件：$emit("click".fn) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值