给子组建绑定原生事件（@click.native）

最新推荐文章于 2025-03-17 09:39:53 发布
原创 最新推荐文章于 2025-03-17 09:39:53 发布 · 1.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#原生click事件

本文介绍Vue中如何利用Bus实现非父子关系组件间的通信。通过在Vue实例下挂载Bus属性，并使用$emit方法指定触发的事件名，最后在mounted生命周期钩子中用Bus.$on监听事件。

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

通过.native属性后就不用通过子组件的事件触发this.$emit('事件')触发了

但两个没有父子关系的组件通过什么传值，还是要通过$emit('事件名'，值)

1.在vue实例下挂在一个属性bus，

2.vue实例存在$emit方法，bus作为vue实例下的属性，也有这个方法

3.通过bus的$emit方法指定触发的事件名

4.然后在mounted下用bus.$on监听bus下定义的事件。

@click.native中 .native 的含义与使用
02-18 7594
vue 当中的 @click.native .native--侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口 也就是说，在处理DOM原生事件的场合中需要添加额外的标识符 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加.nativ.
@click.native
code
08-26 3468
关于vue中@click.native .native - 侦听组件根元素上的原生事件 作用：[给组件绑定原生事件] 例子：如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。 @ 这个东西实际上...
vue @click.native 原生点击事件
热门推荐
chenjin_chenjin的博客
07-23 1万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） 2，等同于在自组件中：    子组件内部处理click事件然后向外发送click事件：$emit("click".fn) ...
谈聊@click.native
小白的豪豪
01-17 904
对于自身是一小小提高，只想过绑定事件时用click。从未想到在vue组件中，使用@click会默认认为监听的是来自item组件自定义的事件。 以此得到了如下： 1.当给vue组件绑定事件的时候，必须在后面加上native 2.等同于在子组件中：子组件内部处理click事件，然后向外发送click事件：$emit("click".fn) <el-option v-for="item in Month" :value="item.value" @cl...
如果这是 Element UI 自己封装的行为，不是原生 HTML <form> 或 <label> 的默认特性，那为什么使用@click.native.prevent可以阻止这种行为，@click.native.prevent应该不能阻止自定义事件吧
02-27
不过用户之前给出的示例中，使用了@click.native.capture.stop.prevent，这可能在捕获阶段就阻止了事件，导致Element UI的监听器无法接收到事件。这里需要详细解释事件流机制，包括捕获阶段和冒泡阶段，以及修饰符的...
我使用的是@click.native.prevent，而且，Element UI 的聚焦行为依赖原生事件，你上面提到他监听了原生事件，但是我使用@click.native.prevent是阻止原生的默认行为，但是应该还是可以监听到有点击发生的吧，所以应该阻止不了聚焦了才对啊
02-27
假设Element UI确实是在label元素上直接添加了click事件监听器，那么在父元素上使用@click.native.prevent，实际上是在父元素的原生click事件上阻止默认行为。但label的子元素事件可能已经触发了，因为事件冒泡是从...
vue组件添加事件@click.native
weixin_30732487的博客
02-15 176
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) <Item @click.native = "shijian()"></Item> 　　 转载于:https://www...
Vue中@click.native的使用
LFQP_的博客
04-11 3962
Vue中@click.native的使用
vue 中 @click.native
ITLISHUANG的博客
12-23 354
写在前：使用 vue + element 的项目 <el-option v-for="item in subEnum" :key="item.key" :value="item.key" :label="item.value" @click.native="sectionTap"></el-option> @click.native ：给组件绑定原生事件 ...
vue @click.native
xiaoerlang715的博客
12-04 579
 给vue组件添加事件的时候，要加上.native  而普通的html的元素，就不需要
@click.native的用法
zhtxilyj的博客
03-22 506
正常情况下点击事件用@click，但是如果是自定义组件的父组件如果想要点击事件就需要用到@click.native了，因为自定义组件本身没有点击事件。正常情况下父组件newzujian 添加点击事件@click="click"并不会生效，但是@click.native="click"是可以生效的。
vue中@click.native的使用
qq_37550440的博客
05-31 903
<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.native=“toUser“中native的作用
最新发布
qq_62237063的博客
03-17 352
click：监听组件内部通过触发的自定义事件。：监听组件的原生click事件。主要用于在自定义组件上监听原生 DOM 事件。
@click.native.prevent
weixin_45609659的博客
07-29 1442
@click.native.prevent。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值