Vue 中 点击事件补充.native

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量154 收藏
点赞数 1
文章标签： vue html js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jomes_wang/article/details/111627981
版权

一：前言

​ 发现vue中加载Element 之后 键盘事件无效果搜索之后发现有BUG特来修复

二：步骤

发现Element-input 中加入@keyup.enter中无效果

<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter="goSearch" ></el-input>

之后在加入.native 的修饰符

<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter.native="goSearch" ></el-input>

​ 官网的解释：

​ 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

​ 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。

可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。

jomes_wang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
浅谈vue中组件绑定事件时是否加.native
01-19
组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt label=用户名 placeholder=请输入用户名></mt> --> <input type=text @keyup.native=show($event)> //普通组件不能添加.native, 添加后事件失效 </template> [removed] import { MessageBox } from 'mint-ui'; export default
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 7827
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
vue键盘事件点击事件加native
mo_jiu的博客
05-24 8948
&lt;el-card class="box-card animated flipInY"&gt; &lt;el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" cl
Vue中@click.native的使用
LFQP_的博客
04-11 3807
Vue中@click.native的使用
vue @click.native 原生点击事件
weixin_46396391的博客
09-03 5557
前几天在改视频播放bug的时候碰上一个问题，使用公司的Tooltip组件时，点击事件冒泡不起作用。导师看了之后用click.native.stop解决了问题，在这里记录一下native的用法。 参考一： vue @click.native 原生点击事件： 1、给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符） 2、等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emi...
【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次
qq_34838046的博客
10-07 1392
文章目录现象解决方法原因 现象 使用element-ui的组件el-checkbox，绑定点击事件 <el-checkbox @click="state()"></el-checkbox> 点击事件不触发 添加.native标签之后，触发了事件，但是触发了两次 <el-checkbox @click.native="state()"></el-checkbox> 解决方法 通过事件对象元素的类型，过滤事件 修改为 <el-ch
vue中的一些知识
zy的博客
01-26 1006
v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容 同上 v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind
vue - 修饰符.native 与修饰符.sync
小海的博客
05-15 354
<my-com @click="hClick"></my-com> 提问: 对于自定义的组件，如果添加@click，在我们点击这个组件，这个回调会执行吗？ 答：不会！ 原因：自定义子内部并没有$emit这个click事件。 对于内置dom元素（例如div, button,p,…） vue会自动绑定系统事件（click, mouseenter，…），而对于普通的自定义的组件要自己处理。 ...
$listeners与.native的使用
李振恒
01-05 497
$listeners的使用 官网解释： 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 个人理解： 创建parent组件的子组件child,child的子组件child_child 代码如下： <div id="app"> <paren...
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-14 587
成功 解决 @keyup.enter="search()" 在el-input 组件中不生效的问题
vue事件修饰符.native
cmhahaha的博客
08-11 1762
问题 在写代码时我注意到click事件的native修饰符，如下： <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span> </el-dropdown-item> 请问这里的native是什么，有什么用？对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我..
render函数使用点击事件native
weixin_49032614的博客
09-28 1507
【代码】render函数使用点击事件native。
vue组件添加事件的时候需要加上native
m0_50618406的博客
11-18 1042
我们在给vue组件添加事件的时候，有时需要添加native。 当我们想在vue根组件监听原生事件的时候，我们可以使用v-on的修饰符native 比如，我们给router-link标签添加cilck事件，如果不加native，事件是不会发生的，因为默认是进行路由跳转，而native就能够给组件绑定原生对象。 <el-input v-model='listquery.name' placeholder='请输入商品名称' style='width: 150px' clearable class='fil
Vue给组件添加点击事件 @click.native
weixin_45429941的博客
04-20 4085
问题 毕设项目中有个产品展示列表，当初用组件写的，今天想要点击获取当前选中的产品的数据，刚开始直接使用@click写的，但是点击并没有生效。 我尝试在组件中添加点击事件，点击图片，控制台输出1。 结果是可以实现的。 结论 给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件。 那么，两者同时存在的话结果如何呢？ 点击图片，先执行item中的函数，再执行组件的点击事件。 ...
vue @click.native和@click.stop和@click.self
热门推荐
前端技术的学习整理
05-10 11万+
参考一： vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符） 2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn) 参考二： 在事件处理器中经常需要调用event.preventDefault()...
Vue中@click事件无效？@click.native中.native的含义和使用
weixin_44370837的博客
01-25 9106
记录@click绑定事件的一个坑 问题描述： 今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。 代码如下： <template> <div> <span>父组件页面</span> <search @click="onSubmit"></search> </div> </template> <script> methods: { onSubmit() { alert('sh
@click.native中 .native 的含义与使用
02-18 7404
vue 当中的 @click.native .native--侦听组件根元素上的原生事件 作用： 给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口 也就是说，在处理DOM原生事件的场合中需要添加额外的标识符 比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加.nativ.
vue3中@click.native报错的原因及解决办法
05-16
在 Vue 3 中，`@click.native` 已经被弃用，因为 Vue 3 中的渲染器默认使用原生事件，不再需要使用 `.native` 修饰符。 所以，如果在 Vue 3 中使用 `@click.native`，会提示以下错误： ``` Template compilation ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值