vue中组件需要.native才能触发原生事件

最新推荐文章于 2024-08-15 09:40:56 发布
原创 最新推荐文章于 2024-08-15 09:40:56 发布 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #.native

本文解析了在Vue框架中，如何使用<el-input>组件正确地监听键盘事件，并解释了为什么需要添加.native修饰符才能使事件正常工作。深入探讨了.vue中v-on指令的.native修饰符的作用及其在组件事件监听中的重要性。

问题描述：

<input @keyup.enter="myClick()"></input>

<el-input @keyup.enter.native="myClick()"></el-input>

以上两个例子都能够通过键盘事件触发myClick()方法，为什么在<el-input ></el-input>上需要.native才能触发成功？

原因：

使用 v-on 的 .native可以将原生事件（此处的键盘事件）绑定到组件上，也就是说此处的.native可以将键盘事件绑定到<el-input>组件上

《Vue3 与 Vue2 差异集合》Vue3 移除事件修饰符 .native
前端技术
03-14 1057
Vue3 移除事件修饰符 .native
Vue中‘.native‘修饰符的作用
chen__cheng的博客
07-26 8260
一般情况下，父组件要监听子组件的事件，可以通过$emit的方式。但是如果父组件要监听子组件的原生事件，比如：input的focus事件。此时可以通过使用v-on的.native修饰符达到目的。 .native 可以在某组件的根元素上监听一个原生事件 从上面的语句可以看出，.native作用于组件的根元素。 所以如果需要监听的元素是作为根元素，此时.native完全适用 例如： 父组件 <template> <div id="app"> <baseLabel v
vue-elementui限制input只能输入数字校验
MtiredM的博客
10-25 1699
vue-elementui限制input只能输入数字校验 说明 关于@input.native，由于elementui中对html的属性做了封装，所以使用html的原生属性需要添加“.native” @input.native=“formatNumber(‘area’)” // 正常英文输入法情况下输入框输入内容变化时对输入数据的处理 @compositionend.native=“formatNumber(‘area’)” // 中文输入法下输入内容变化时对输入数据的处理 formatNumb
Web前端之Vue知识点
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
12-08 7768
Web前端之Vue知识点
vue中的.native修饰符
Sapling
04-10 409
.native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的 比如在vue+element中给input添加keyup事件时，如果不添加...
vue中native的用法
qq_61153907的博客
01-13 815
在普通标签上加上native会报错且事件无效。在自定义标签上加上navtive，点击事件正常生效，在自定义事件上不加navtive不会报错但事件无效。
详解Vue.js中.native修饰符
10-18
在处理组件中的事件监听时，.native修饰符是一个特别有用的工具，尤其是在需要将原生事件监听器绑定到一个组件上时。 首先，我们来看一看事件监听在Vue.js中的基本用法。在Vue实例中，可以通过v-on指令来监听DOM...
浅谈vue中组件绑定事件时是否加.native
10-16
总的来说，Vue组件绑定事件时是否需要添加`.native`取决于我们是要监听原生DOM事件还是自定义组件的事件。对于原生元素，不需要`.native`；而对于自定义组件，如果需要监听其内部的DOM事件，则必须加上`.native`。...
vue中@click.native
最新发布
11-21
1. **@click.native的主要作用**：在Vue中，当给自定义的组件（子组件）绑定原生事件（如click）时，需要使用`.native`修饰符。因为默认情况下，父组件在子组件上绑定的`@click`会被识别为自定义事件，而不是原生的...
vue .native
DreamFJ的博客
04-29 708
有时发现用一些第三方的组件库时，例如一个封装好的button按钮，绑定点击事件却没有任何作用，这时便需要加 .native 原因： v-on是对 Vue 的事件体系封装后的 API 接口，官方文档中指出Vue 使用的是一套自己的事件传递机制，如@click等事件是经过 Vue 封装的。所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。 而.native就是给组件绑定原生...
Vue中native的用法
热门推荐
qq_41428035的博客
10-23 1万+
Vue中native的用法 native native在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解： 例子 四个按钮，分别是普通标签不加native和加native，自定义标签不...
vue事件修饰符.native
cmhahaha的博客
08-11 1893
问题 在写代码时我注意到click事件的native修饰符，如下： <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span> </el-dropdown-item> 请问这里的native是什么，有什么用？对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我..
vue 事件中的 .native
heyuqing32的博客
12-24 538
native - 监听组件根元素的原生事件。  主要是给自定义的组件添加原生事件。 例子  给普通的标签加事件，然后加native是无效的 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;
vue事件的.native属性
05-29 832
一个原生input输入框的敲击回车事件可以使用 @keyup.enter="addNew()" 当使用非原生的input输入框时,当上一种方法无效,可以使用 @keyup.enter.native="addNew()"
47.vue组件上定义事件需要用到native
咖喱鸡块的博客
03-31 583
div> my-button @click.native="buttonClick">my-button> div> template> import myButton from './components/myButton.vue' export default { components : { myButton },
【亲测免费】 推荐使用：Vue Native —— 跨平台移动应用开发的利器！
gitblog_00051的博客
05-11 1758
警告：此项目已被废弃，不再维护。但其历史价值和理念仍然值得借鉴和学习。 ## 项目介绍 Vue Native 是一个框架，它允许开发者使用 JavaScript 来构建跨平台的原生移动应用。它是基于 React Native 的封装，所以利用 Vue Native，你可以实现React Native的所有功能。这个框架特别之处在于它结合了 Vue.js 的简洁性和 React Native 的...
Vue Native：以Vue之名，跨平台移动开发新选择
gitblog_01151的博客
08-15 1174
????虽然Vue Native项目已不再维护，但其理念和技术遗产值得我们探索与借鉴。让我们一起回顾这个曾经为开发者打开新大门的框架，它如何让Vue.js爱好者进入原生移动应用开发的世界。 ## 项目介绍 Vue Native，一个巧妙结合了Vue.js简洁语法和React Native强大跨平台能力的框架。它的使命是让JavaScript开发者能够借助熟悉且强大的Vue语法，构建iOS和Andr...
vue中.native的使用
codingWeb的博客
01-30 658
.native用于监听组件原生事件 实现监听组件事件的两种方式： • 但父组件想在子组件上监听自己的click的话，需要加上.native修饰符 • 可以利用vue的自定义事件实现不添加.native修饰符即可监听父组件自身的事件，如果想要监听其他的事件，只要在子组件中添加相应的触发即可 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值