Vue如何给组件添加点击事件 @click.native
目录
- 给组件添加点击事件 @click.native
- 问题
- 结论
- vue中@click.native使用
- @click.native是给组件绑定原生事件
给组件添加点击事件 @click.native
问题
毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效。
我尝试在组件中添加点击事件,点击图片,控制台输出1。
结果是可以实现的。
结论
给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件。
那么,两者同时存在的话结果如何呢?
点击图片,先执行item中的函数,再执行组件的点击事件。
vue中@click.native使用
在组件中时常看到@click.native。在项目中遇到后,简单介绍下:
@click.native是给组件绑定原生事件
我的标签 ‘ListCell’ 是子组件引到当前父组件
因为当父组件中引入子组件的时候,当要触发子组件点击事件的时候@click 不生效。
有两种解决方式
1.@click.native
2.在子组件中添加this.$emit ( “事件名” ,value )方法 将子组件的值传到父组件。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue中关于click.stop的用法
目录 关于click.stop的用法 @click.stop与@click.prevent 一.@click.stop 二.@click.prevent 关于click.stop的用法 click.stop 阻止点击事件继续传播 场景: 在table中使用,点击当前行,当前行被勾选,但是点击当前行中按钮或点击事件时,使用此方法,则在触发当前点击事件后,阻止行的选中事件 使用: html <el-table ref="tableRef" :data="tableData&
-
Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)
目录 Vue使用Echarts5.0的一些问题 问题 解决方案一 解决方案二 为什么会出现这种情况? vue使用echarts 5.0“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘ Vue使用Echarts5.0的一些问题 问题 最新版的 Echarts5.0 使用 import echarts from 'echarts' 导入,会发现导出的 echarts 是 undefined 的情况,无法正常使用.
-
代替Vue Cli的全新脚手架工具create vue示例解析
目录 前言 npm init npx 源码 主流程入口 获取参数 对话选项 默认值 emptyDir函数 模板写入 简述 快照 总结 前言 美国时间 2021 年 10 月 7 日早晨,Vue 团队等主要贡献者举办了一个 Vue Contributor Days 在线会议,蒋豪群(知乎胖茶,Vue.js 官方团队成员,Vue-CLI 核心开发),在会上公开了create-vue,一个全新的脚手架工具. create-vue 使用 npm init vue 一行命令就能快速的创建基于Vite的Vu
-
VUE3中h()函数和createVNode()函数的使用解读
目录 h()函数和createVNode()函数的使用 使用方法 VUE3中h方法和createVnode的实现 在公共包shared里写上ShapeFlags 在runtime-core模块里创建vnode.ts文件专门处理虚拟节点 为了后续的diff算法,我们要给这个虚拟节点上加一些属性和标识 h的用法 创建h.ts文件来写h方法 h()函数和createVNode()函数的使用 使用方法 h(标签, {属性},内容) h(标签, {属性},[可以继续嵌套h()]) createVNode(
-
vue中this.$createElement方法的使用
目录 vue this.$createElement方法 关于createElement使用实例 参数说明 使用示例 源码解读 vue this.$createElement方法 element ui中的slider的marks属性中使用到this.$createElement方法设置标记样式: 上面虽然只用到两个参数,实际上,此方法有三个参数: ①第一个参数为标签,即创建的节点元素的标签是什么 ②第二个参数是属性配置,如class.style等 ③第三个参数是节点元素的内容 this.$cre
-
VUE使用vue create命令创建vue2.0项目的全过程
目录 前言 第一步,打开命令行后,首先进入我们想要创建项目的目录下 第二步,执行 vue create xxxx 命令 总结 前言 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题,我们使用 管理员身份 打开命令行 第一步,打开命令行后,首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下,我这里是保存在 G:\Git 文件夹 第二步,执行 vue create xx
-
Vue如何给组件添加点击事件 @click.native
目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It
-
在elementui中Notification组件添加点击事件实例
1. 官方文档 2. 添加点击事件,传参 handleClick() { let telNo = "1111", message = "22222", _this = this; //函数作用域问题 this.$notify({ title: "通知消息", position: "bottom-right", dangerouslyUseHTMLString: true, message: `<p style="
-
vue 项目引入echarts 添加点击事件操作
main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale
-
vue动态渲染svg、添加点击事件的实现
业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed.img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id="svgTemplate"></div> </div>
-
Vue在echarts tooltip中添加点击事件案例详解
目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件) 项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许
-
vue如何给自定义的组件绑定点击事件
目录 给自定义的组件绑定点击事件 给自定义组件添加单击事件 给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效. 先给cardinfo这个组件绑定一个点击事件 <cardinfo :content="content" :from="from" :ProPortrait="ProPortrait&quo
-
vue组件添加事件@click.native操作
1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v
-
vue键盘事件点击事件加native操作
如下所示: <el-card class="box-card animated flipInY"> <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="d
-
vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一.简单介绍 二.安装和使用 三.效果图 四.vue-seamless-scroll 点击事件实现原理 五.简单实现 六.关键代码 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一.简单介绍 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用. 本节介绍,vue 中添加 vue-seamless-scroll,简
-
Android开发使用RecyclerView添加点击事件实例详解
目录 引言 一.RecyclerView基本使用 1. 添加适配器Adapter 2. 创建列表的每个项的item_layout.xml文件 3. 在activity中使用 二.RecyclerView点击事件详细步骤 1. 在RecyclerView对应的Adapter类里面新建接口 2. 在Adapter类里创建setOnItemClickListener方法 3. 在Adapter类的onBindViewHolder里给每个item设置回调 4. 在RecyclerView对应的Activ
随机推荐
- 基于Require.js使用方法(总结)
- SQL Server 2005 Management Studio Express企业管理器将英文变成简体中文版的实现方法
- PHP中MongoDB数据库的连接、添加、修改、查询、删除等操作实例
- ExtJS4 Grid改变单元格背景颜色及Column render学习
- js用闭包遍历树状数组的方法
- oracle数据库密码到期怎么解决
- 关于中gridview 字符串截取的方法
- js简单实现竖向tab选项卡的方法
- php检测mysql表是否存在的方法小结
- ASP中通过该日历算法实现的具体代码
- asp.net(c#)下读取word文档的方法小结
- 基于c++中的默认拷贝函数的使用详解
- ArtEditor富文本编辑器增加表单提交功能
- jquery插件制作简单示例说明
- jQuery:节点(插入,复制,替换,删除)操作
- javascript中几个容易混淆的概念总结
- Shell脚本配合iptables屏蔽来自某个国家的IP访问
- WPF MVVM示例讲解
- 常见系统进程列表第1/2页
- Android 定时任务过程详解