广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中的@click.native原生点击事件
  • 799
分享到

vue中的@click.native原生点击事件

2024-04-02 19:04:59 799人浏览 独家记忆
摘要

目录@click.native原生点击事件给Vue组件绑定事件时候等同于在自组件中vue点击事件补充.native步骤官网的解释@click.native原生点击事件 给vue组件绑

@click.native原生点击事件

给vue组件绑定事件时候

必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)

等同于在自组件中

子组件内部处理click事件然后向外发送click事件:$emit("click".fn)

vue点击事件补充.native

发现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标签是没有任何作用的。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中的@click.native原生点击事件

本文链接: https://www.lsjlt.com/news/146856.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中的@click.native原生点击事件
    目录@click.native原生点击事件给vue组件绑定事件时候等同于在自组件中vue点击事件补充.native步骤官网的解释@click.native原生点击事件 给vue组件绑...
    99+
    2022-11-13
  • vue中的@click.native原生点击事件怎么实现
    本文小编为大家详细介绍“vue中的@click.native原生点击事件怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中的@click.native原生点击事件怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一...
    99+
    2023-06-30
  • Vue如何给组件添加点击事件 @click.native
    目录给组件添加点击事件 @click.native问题结论vue中@click.native使用@click.native是给组件绑定原生事件给组件添加点击事件 @click.nat...
    99+
    2022-11-13
    Vue组件添加点击事件 Vue @click.native Vue组件点击事件
  • vue中@click绑定事件点击不生效的原因及解决方案
    目录原因:解决方法:Vue中@click不生效的解决办法原因: 根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想...
    99+
    2022-12-08
    vue中@click绑定事件 vue @click不生效 vue @click @click用法
  • vue中@click绑定事件点击不生效的解决
    目录@click绑定事件点击不生效原因解决方法@click中不能使用三则表达式原因@click绑定事件点击不生效 原因 根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过pr...
    99+
    2022-11-13
    vue @click不生效 vue中@click @click绑定事件不生效
  • vue中的主动触发点击事件
    目录主动触发点击事件如何自动触发点击事件模拟点击下载文件、图片主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从...
    99+
    2022-11-13
  • vue中如何模拟点击事件
    在vue中模拟点击事件的方法:1.新建vue.js项目;2.添加按钮,设置ref属性;3.添加@click属性绑定事件;4.使用this方法触发事件;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create pr...
    99+
    2022-10-21
  • vue中div禁止点击事件的实现
    目录div禁止点击事件div作为按钮不可点击问题的处理div禁止点击事件 在props里面定义一个判断是不是只读的属性。 在最外面的div里面添加三元表达式 pointer-e...
    99+
    2022-11-13
  • vue长按事件和点击事件冲突的解决
    目录长按事件和点击事件冲突的解决使用场景具体需求代码说明vue web端长按事件,解决和click冲突长按事件和点击事件冲突的解决 使用场景 在使用vue做移动端开发时,遇到了长按事...
    99+
    2022-11-13
    vue长按事件 vue点击事件 长按和点击事件冲突
  • vue中div禁止点击事件怎么实现
    这篇文章主要介绍“vue中div禁止点击事件怎么实现”,在日常操作中,相信很多人在vue中div禁止点击事件怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中div禁止点击事件怎么实现”的疑惑有所...
    99+
    2023-06-29
  • vue innerHTML 绑定单击事件不生效的解决
    目录vue innerHTML 绑定单击事件不生效原代码最终解决方法vue动态拼接innerHTML时添加点击事件,并在点击事件中调用vue方法场景实现总结vue innerHTML...
    99+
    2023-01-28
    vue innerHTML 绑定单击事件不生效 vue innerHTML事件
  • 怎么解决vue点击弹窗自动触发点击事件的问题
    这篇文章给大家分享的是有关怎么解决vue点击弹窗自动触发点击事件的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个...
    99+
    2023-06-15
  • VUE中v-html不能触发点击事件怎么办
    这篇文章主要介绍VUE中v-html不能触发点击事件怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a...
    99+
    2022-10-19
  • Vue在echarts tooltip中添加点击事件案例详解
    目录需求解决方法1、设置tooltip2、定义hookToolTip变量3、在methods中添加方法4、完整代码需求 需要在echarts tooltip点击学校的名称,跳转到详情...
    99+
    2022-11-12
  • vue如何给自定义的组件绑定点击事件
    目录给自定义的组件绑定点击事件给自定义组件添加单击事件给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件...
    99+
    2022-11-13
  • vue怎么给自定义的组件绑定点击事件
    这篇文章主要介绍“vue怎么给自定义的组件绑定点击事件”,在日常操作中,相信很多人在vue怎么给自定义的组件绑定点击事件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么给自定义的组件绑定点击事件”的疑...
    99+
    2023-06-30
  • vue中怎么通过父组件点击触发子组件事件
    这期内容当中小编将会给大家带来有关vue中怎么通过父组件点击触发子组件事件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。父组件app.vue<template>...
    99+
    2022-10-19
  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)
    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。  div  指令: // 自动触发...
    99+
    2022-11-12
  • Android 中RecycleView实现item的点击事件
    Android 中RecycleView实现item的点击事件 RecycleView现在已经越来越受到大家的重视,因为他既可以代替listView还可以代替GridView,...
    99+
    2022-06-06
    事件 Android
  • vue中怎么实现二级菜单导航点击选中事件
    这篇文章将为大家详细讲解有关vue中怎么实现二级菜单导航点击选中事件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。目标:一级导航点击收缩展开,二级导航点击选...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作