vue中@click.native的使用

最新推荐文章于 2024-01-21 16:31:26 发布
最新推荐文章于 2024-01-21 16:31:26 发布
阅读量902 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： uni-app 文章标签： vue.js uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37550440/article/details/125068164
在前端开发中，经常遇到在组件上使用@click.native来绑定原生事件的情况。当在父组件中引入子组件，并需要触发子组件的点击事件时，常规的@click可能无法生效。此时，使用@click.native则可以确保事件在底层元素上正确触发。本文将简单介绍@click.native的用法及其在组件交互中的作用。

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

<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是给组件绑定原生事件
我的标签 ‘ListCell’ 是子组件引到当前父组件
因为当父组件中引入子组件的时候，当要触发子组件点击事件的时候@click 不生效。
使用
1.@click.native
 

@click.native中 .native 的含义与使用
02-18 7590
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 2373
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和element布局时，关于左右布局传参数的2种写法vue组件添加事件@click.native
qq_39168286的博客
08-23 1327
先上图说说 为何第一种方式跳转不了 要实现的是点击左边框，右边也会出现相应的值 <el-submenu index="3"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">系统管理</span&...
vue @click.native 原生点击事件
chenjin_chenjin的博客
07-23 1万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） 2，等同于在自组件中：    子组件内部处理click事件然后向外发送click事件：$emit("click".fn) ...
Vue中@click.native的使用
LFQP_的博客
04-11 3957
Vue中@click.native的使用
vue组件添加事件@click.native
weixin_30732487的博客
02-15 173
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) <Item @click.native = "shijian()"></Item> 　　 转载于:https://www...
vue中@click.native
77今天也学习了的博客
08-10 630
@click.native 给子组件绑定事件，当父组件引入子组件后，如果要触发子组件的事件，需要添加修饰符.native。 相当于把子组件中的方法传给父组件让父组件中可以调用 当用了封装组件的话，使用按键修饰符需要添加.native才会触发 ...
vue组件添加事件@click.native操作
01-21
2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item> 补充知识：vue——组件间（兄弟组件间）事件派发与接收 法一 main.js 在初始化vue之前，给...
一个因@click.stop引发的bug的解决
10-17
开发者在项目中的菜单栏组件中使用了`<div class="main" @click.stop="isShowWhole = false">`，这里的`@click.stop`修饰符阻止了事件冒泡，可能导致Popover外部点击的事件判断无法正常触发。移除`stop`修饰符后，...
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()...
@click.native
最新发布
Pzg3240432140的博客
01-21 682
事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。事件是不会触发的，因此需要加上。，如果是普通的html元素。绑定事件的时候，要加上。
vue @click.native的使用
jjw_zyfx的博客
10-16 995
如果想给自己封装的或者是第三方的组件添加click事件的时候需要使用 @click.native，而不是@click,@click在给组件添加的时候是不会生效的 比如给第三方添加@click.native的方法： ...
vue @click.native
weixin_44866262的博客
05-25 1081
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)...
谈聊@click.native
小白的豪豪
01-17 903
对于自身是一小小提高，只想过绑定事件时用click。从未想到在vue组件中，使用@click会默认认为监听的是来自item组件自定义的事件。 以此得到了如下： 1.当给vue组件绑定事件的时候，必须在后面加上native 2.等同于在子组件中：子组件内部处理click事件，然后向外发送click事件：$emit("click".fn) <el-option v-for="item in Month" :value="item.value" @cl...
click.native（vue中给子组件绑定事件）
imkaifan的博客
03-09 1382
问题阐述：vue中最大的特色莫过于组件化，让我们的代码可以插拔式的应用，但是组件怎样绑定事件呢，有很多复杂化的做法，今天发现一个简单的办法 1、给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）。 2、等同于在自组件中：子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) 代码： <template> <div class="putongziping_container">
vue @click.native.prevent的作用
06-06
`@click.native.prevent` 是 Vue.js 框架中的一个事件修饰符，它的作用是阻止元素的默认行为和事件冒泡。其中，`.native` 修饰符用于监听组件根元素的原生事件，`.prevent` 修饰符用于防止默认行为。 举个例子，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

流氓也是种气质 _Cookie

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值