vue @click.native的使用

最新推荐文章于 2025-03-17 09:39:53 发布
最新推荐文章于 2025-03-17 09:39:53 发布
阅读量982 收藏
点赞数 2
分类专栏： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjw_zyfx/article/details/102589682
版权
本文介绍在Vue中如何正确地为自定义或第三方组件添加click事件。通常，直接使用@click不会生效，需用@click.native确保事件能在组件上触发。示例展示了第三方组件添加@click.native的具体方法。

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

如果想给自己封装的或者是第三方的组件添加click事件的时候需要使用

@click.native，而不是@click,@click在给组件添加的时候是不会生效的

比如给第三方添加@click.native的方法：

@click.native中 .native 的含义与使用
02-18 7579
vue 当中的 @click.native .native--侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口 也就是说，在处理DOM原生事件的场合中需要添加额外的标识符 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加.nativ.
点击el-dropdown-item/@click.native
Suzerk的博客
07-27 1205
在学习vue使用element组件的时候经常会用到Dropdown 下拉菜单，对于点击el-dropdown-item的事件触发跳转@click="logout()"是不行的，给一个vue组件绑定事件时候，要加上native。 <el-dropdown-item divided="true" @click.native="logout()" >Log Out</el-dropdown-item> methods: { logout()
vue组件添加事件@click.native操作
01-21
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item> 补充知识：vue——组件间（兄弟组件间）事件派发与接收 法一 main.js 在初始化vue之前，给 data 添加一个名为 event 的空vue对象 new Vue({ render: h => h(App), router, store, data: { event: ne
Vue中@click.native的使用
LFQP_的博客
04-11 3922
Vue中@click.native的使用
@click.native=“toUser“中native的作用
最新发布
qq_62237063的博客
03-17 315
click：监听组件内部通过触发的自定义事件。：监听组件的原生click事件。主要用于在自定义组件上监听原生 DOM 事件。
vue组件添加事件@click.native
weixin_30732487的博客
02-15 167
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) <Item @click.native = "shijian()"></Item> 　　 转载于:https://www...
@click.native
Pzg3240432140的博客
01-21 648
事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。事件是不会触发的，因此需要加上。，如果是普通的html元素。绑定事件的时候，要加上。
vue中@click.native的使用
qq_37550440的博客
05-31 896
<uni-list :border="true"> <uni-list-item v-for="item in searchs" :title="item.name" :note="''" @click.native="change(item)"></uni-list-item> </uni-list> 在组件中时常看到@click.native。在项目中遇到后，简单介绍下： 一丶@click.native是给组件绑定原生事件 我的标签 ‘L.
一个因@click.stop引发的bug的解决
10-17
开发者在项目中的菜单栏组件中使用了`<div class="main" @click.stop="isShowWhole = false">`，这里的`@click.stop`修饰符阻止了事件冒泡，可能导致Popover外部点击的事件判断无法正常触发。移除`stop`修饰符后，...
@click.native.prevent
seimeii的博客
12-03 2307
1、加native作用 为了让点击事件生效 元素中绑定了这个事件 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button> 1、在封装好的组件上使用，所以要加上.native才能click。 2、prevent是用来阻止默认的事件。就相当于…event.preventDe
vue @click.native 原生点击事件
chenjin_chenjin的博客
07-23 1万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） 2，等同于在自组件中：    子组件内部处理click事件然后向外发送click事件：$emit("click".fn) ...
vue @click.native
weixin_44866262的博客
05-25 1066
vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） @click.native 是给组件绑定原生事件，只能用在组件上，不可以用在原生元素上。异常信息： [Vue warn]: The .native modifier for v-on is only valid on components but it was used on . 2，等同于在自组件中： 子组件内部处理click事件然后
@click.native的用法
zhtxilyj的博客
03-22 495
正常情况下点击事件用@click，但是如果是自定义组件的父组件如果想要点击事件就需要用到@click.native了，因为自定义组件本身没有点击事件。正常情况下父组件newzujian 添加点击事件@click="click"并不会生效，但是@click.native="click"是可以生效的。
vue中@click.native
77今天也学习了的博客
08-10 618
@click.native 给子组件绑定事件，当父组件引入子组件后，如果要触发子组件的事件，需要添加修饰符.native。 相当于把子组件中的方法传给父组件让父组件中可以调用 当用了封装组件的话，使用按键修饰符需要添加.native才会触发 ...
vue @click.native和@click.stop和@click.self
热门推荐
前端技术的学习整理
05-10 12万+
参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符） 2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) 参考二： 在事件处理器中经常需要调用event.preventDefault()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值