.native什么时候使用？（监听组件根元素的原生事件）

最新推荐文章于 2023-07-27 13:56:33 发布
最新推荐文章于 2023-07-27 13:56:33 发布
阅读量346 收藏
点赞数
分类专栏： js 文章标签： 前端 css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38109616/article/details/123779383
版权
本文探讨了在Vue中如何监听组件的原生事件，特别是当尝试在<back-top>组件上绑定点击事件时，发现不使用.native修饰符无法正常触发。.native修饰符用于确保事件监听的是组件根元素的原生事件，而不是组件内部自定义的事件。文章以backTop组件为例，解释了何时需要使用.click.native来正确实现点击事件的监听。
摘要由CSDN通过智能技术生成

在这里插入图片描述
home组建中backTop（回到顶部功能）点击触发scroll组件中的方法，


<back-top @click=“backClick”/>组件中是不能直接监听点击的，
<back-top @click.native=“backClick”/>组件中是不能直接监听点击的，必须加native

.native什么时候使用？
在我们需要监听一个组件的原生事件时，必须给对应的事件上加上.native修饰符才能进行监听，

Vue如何实现监听组件原生事件
10-15
主要介绍了Vue如何实现监听组件原生事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
浅谈vue中组件绑定事件时是否加.native
10-16
总的来说，Vue组件绑定事件时是否需要添加`.native`取决于我们是要监听原生DOM事件还是自定义组件的事件。对于原生元素，不需要`.native`；而对于自定义组件，如果需要监听其内部的DOM事件，则必须加上`.native`。...
监听组件根元素的原生事件——修饰符.native
<WRM>的博客
08-06 510
<back-top @click.native="backClick"></back-top> methods: { backClick() { console.log("----------"); }, },
给组件绑定原生事件
我不想说
03-11 297
<div id="app"> <child @click="handleClick"></child> </div> <script> Vue.component('child',{ template:'<p>hello</p>' }) var vm=...
vue组件监听原生事件@click.native
开发路上的AZhe
12-30 836
在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如： <my-component v-on:click.native="doSomething"></my-component> 官网：https://cn.vuejs.org/v2/guide/migration.html#%E7%94%A8-v-on-%E7%9B%91%E5%90%AC%E5%8E%9F%E7%94%9F%E4%B.
Vue .native 将原生事件绑定到组件
352328759的博客
05-25 2357
详见vue官网 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
VUE自定义事件--组件绑定原生事件
aliven1的博客
07-03 422
在一个组件的根元素上直接监听一个原生事件。 你可以使用 v-on 的 .native 修饰符： <base-input v-on:focus.native="onFocus"></base-input> 监听的是非根原生，Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器 //head_nav.vue组件中绑定计算属性 <template> <div class="head_nav boxs".
.native事件修饰符
qq_40029822的博客
03-10 798
事件修饰符使用层次升级，写的高大上就显得更牛皮一些
vue中的.native修饰符
Yetian_2000的博客
03-05 241
使用场景： 如果你想在某个组件的根元素（比如<Aomp @click=’‘sbfun()’>）上绑定事件，直接使用 @click=’‘function’ 是不生效的，我们可以添加.native修饰符 @click.native=’‘function’’. native是什么？ .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 ...
native方法在java中介绍及使用图解
Smarts
03-27 1万+
一、native()方法简单介绍。 概念：简单地讲，一个Native Method就是一个Java调用非java代码的接口(因为这个整个实现是用非JAVA语言来完成的），这个native方法不可以使用abstract 来修饰，因为这个方法不是抽象的，方法有实体，但是实体实现的语言不是JAVA而已。一个JAVA Native Method 可能是这样：该方法的实现由非java语言实现，比如C。当然...
.native修饰符的作用和使用场景举例
最新发布
m0_57742630的博客
07-27 879
通过使用.native修饰符，可以将原生事件绑定到组件的根元素上，而不是绑定到组件内部的子组件元素上。假设我们有一个自定义的按钮组件（Button），在组件内部它可能有多个元素（例如：一个span用于文本显示，一个i用于图标），我们希望在使用Button组件的时候，能够方便地监听click事件。这时可以使用.native修饰符。使用.native修饰符的好处是，在不修改Button组件内部的代码的情况下，我们可以在使用Button组件的地方方便地监听到原生的click事件，提高了组件的灵活性和可重用性。
Element中按键修饰符有时候需要加.native
厚积薄发.
09-10 1274
说白了就是在Element组件库中给el-input加修饰符的时候，我们要再加一个.`enter`，把需要加的按键修饰符转为原生的按键修饰符。
Vue中‘.native‘修饰符的作用
chen__cheng的博客
07-26 8031
一般情况下，父组件要监听子组件的事件，可以通过$emit的方式。但是如果父组件要监听子组件的原生事件，比如：input的focus事件。此时可以通过使用v-on的.native修饰符达到目的。 .native 可以在某组件的根元素上监听一个原生事件 从上面的语句可以看出，.native作用于组件的根元素。 所以如果需要监听的元素是作为根元素，此时.native完全适用 例如： 父组件 <template> <div id="app"> <baseLabel v
vue 事件中的 .native
热门推荐
cofecode的博客
12-25 3万+
.native是什么？.native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。例子 给普通的标签加事件，然后加native是无效的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4255
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue组件添加事件的时候需要加上native
m0_50618406的博客
11-18 1060
我们在给vue组件添加事件的时候，有时需要添加native。 当我们想在vue根组件监听原生事件的时候，我们可以使用v-on的修饰符native 比如，我们给router-link标签添加cilck事件，如果不加native，事件是不会发生的，因为默认是进行路由跳转，而native就能够给组件绑定原生对象。 <el-input v-model='listquery.name' placeholder='请输入商品名称' style='width: 150px' clearable class='fil
java中native的用法
dengtong8107的博客
09-06 482
前言： 在查看 Thread.java 文件时，发现有一个 方法比较特殊 private native void start0(); 概念： native关键字说明其修饰的方法是一个原生态方法，方法对应的实现不是在当前文件，而是在用其他语言（如C和C++）实现的文件中。Java语言本身不能对操作系统底层进行访问和操作，但是可以通过JNI接口调用其他语言来实现对底层的访问。 JNI是Jav...
vue中‘. native‘修饰符的使用
qq_41892236的博客
11-17 2100
vue中’. native’修饰符的使用 .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的(我觉的这个说法一点也不通俗)。 举列说明 这时点击按扭没有任何反应。 这时点击按扭，出现弹窗，如下图： 这里候，就可以很明显的看出.nat
vue中click.native什么意思？
04-06
它可以绑定到组件的根元素上，从而触发原生的点击事件。这个指令与普通的 click 指令不同，它不会被 v-on 指令拦截，而是直接绑定到原生的事件上。因此，它可以在组件内部监听原生的点击事件，而不仅仅是组件内部的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

vivk2017

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

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

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

打赏作者

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

抵扣说明：

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

余额充值