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 )方法 将子组件的值传到父组件。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中this.$createElement方法的使用

    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使用vue create命令创建vue2.0项目的全过程

    目录 前言 第一步,打开命令行后,首先进入我们想要创建项目的目录下 第二步,执行 vue create xxxx 命令 总结 前言 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题,我们使用 管理员身份 打开命令行 第一步,打开命令行后,首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下,我这里是保存在 G:\Git 文件夹 第二步,执行 vue create xx

  • VUE3中h()函数和createVNode()函数的使用解读

    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中关于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 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

  • Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

    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如何给组件添加点击事件 @click.native

    目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It

  • 在elementui中Notification组件添加点击事件实例

    在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中添加点击事件案例详解

    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

随机推荐