总结vue @click.native的作用

最新推荐文章于 2023-04-11 10:41:10 发布
原创 最新推荐文章于 2023-04-11 10:41:10 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文阐述了在自定义组件中使用@click操作时，如何通过@click.native实现点击事件的正确触发，避免常见的实现误区。

意思就是如果你在自定义了个组件的时候想进行@click操作，那么你需要写@click.native 这样才可以实现点击操作。否则@click是不可以实现点击操作的。

@click.native中 .native 的含义与使用
02-18 7633
vue 当中的 @click.native .native--侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口 也就是说，在处理DOM原生事件的场合中需要添加额外的标识符 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加.nativ.
@click.native.prevent
seimeii的博客
12-03 2481
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) ...
详解Vue2.0之去掉组件click事件的native修饰
08-30
主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中@click.native
77今天也学习了的博客
08-10 655
@click.native 给子组件绑定事件，当父组件引入子组件后，如果要触发子组件的事件，需要添加修饰符.native。 相当于把子组件中的方法传给父组件让父组件中可以调用 当用了封装组件的话，使用按键修饰符需要添加.native才会触发 ...
前端学习笔记系列一：4 vue中@click.native
weixin_30905981的博客
05-15 381
.native - listen for a native event on the root element of component. 作用：[给组件绑定原生事件] 例子：如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.n...
vue组件添加事件@click.native操作
01-21
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item>...
一个因@click.stop引发的bug的解决
10-17
总结来说，本文主要讲解了如何解决一个由`@click.stop`修饰符引发的问题，涉及到了前端事件冒泡、Vue组件的事件处理以及Element UI Popover组件的工作机制。通过深入理解和分析，我们成功地找到了问题的原因，并给出...
vue中@click.native的使用
qq_39399050的博客
08-25 2万+
vue中@click.native 在组件中时常看到@click.native。在项目中遇到后，简单介绍下： 一丶@click.native是给组件绑定原生事件 我的标签 ‘ListCell’ 是子组件引到当前父组件 因为当父组件中引入子组件的时候，当要触发子组件点击事件的时候@click 不生效。 有两种解决方式 1.@click.native 2.在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件。 参考链接：https://www.jianshu.com
Vue中@click.native的使用
LFQP_的博客
04-11 4063
Vue中@click.native的使用
@click.native
code
08-26 3509
关于vue中@click.native .native - 侦听组件根元素上的原生事件 作用：[给组件绑定原生事件] 例子：如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用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()...
vue @click.native
weixin_44866262的博客
05-25 1110
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事件然后
vue @click.native
学习记录
07-05 2万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）2，等同于在自组件中：   子组件内部处理click事件然后向外发送click事件：$emit("click".fn)...
vue @click.native的使用
jjw_zyfx的博客
10-16 1065
如果想给自己封装的或者是第三方的组件添加click事件的时候需要使用 @click.native，而不是@click,@click在给组件添加的时候是不会生效的 比如给第三方添加@click.native的方法： ...
vue组件添加事件@click.native
weixin_30732487的博客
02-15 190
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) <Item @click.native = "shijian()"></Item> 　　 转载于:https://www...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值