关于vue的@click传递

新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下：

<div @click="test($event)"> </div>然后Vue部分：
methods:{test:function(e){$(e.target).addClass("active");}
}

这样就可以给div元素点击时，增添active这个classname了。

但是在做的时候，我遇到一个问题，当我点击的div有多个内容，并不是空的时候，当我点击了这个div，实际传递过来的event可能是div的内部其他元素，并不是这个div....这个问题不知道怎么解决。。所以还是老老实实的用了jquery做了这个函数

__________________________________________

问题解决了。。。把target换成currentTarget

下面是网上找的解释

target指向,事件最终所作用于的对象
currentTarget指向，事件定义时所在的对象

__________________________________________________

项目中还发现了关于使用click出现了循环的现象，经过排查后发现，也是由于冒泡的原因。执行点击父元素操作时，内部操作不能出现其子元素的继续click操作，不然就会不停地循环执行。

关于vue的@click传递相关推荐

html click事件参数,vue 实现click同时传入事件对象和自定义参数
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧仅仅传入自定义参数 HTML ddddd JS代码 new Vue ...
vue中 @click 绑定点击事件方法传递参数 typescript(通用)
话不多说还是直接上图简单明了 <template><div id="header"><img src="../../assets/logo ...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
Vue父子组件传递数据
<template><div><!-- <div>< ...
【Vue】Props传递数据(父传子) 自定义事件(子传父)
文章目录一.定义一个父组件和一个子组件(子组件嵌套在父组件中) 二.Props传递数据(父传子) 1.使用Props数组方式传值 2.对象方式传值三.自定义事件(子传父) 一.定义一个父组件和一个 ...
Vue父子组件传递/子传父
1.子传父的意思就是,,子组件内容传给父组件,,使父组件可以随时使用子组件传来的数据,使用方法为:自定义函数 1.首先我们来做一个仿淘宝侧边栏商品,点击或者鼠标移动到上面出现内容商品案例 2.以上面这 ...
vue给组件传递不同的值
这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情.一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用. ...
vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...
vue打开二级或者三级页面传输对象，再刷新浏览器数据丢失问题解决（vue使用router传递数据）
vue使用router进行跳转如果只是单纯的URL跳转的话,直接指定path就可以了 this.$router.push({path:'whiteList'}}); 如果需要使用router进行单纯 ...
MUI中vue的@click事件没反应
这是因为mui中上拉加载更多或下拉刷新中的滑动事件和vue事件冲突导致的只需要将 @click 改为@tap 就是这么简单另外mui中双 webview 模式不会出现这个问题,只有单w ...

关于vue的@click传递

关于vue的@click传递相关推荐

最新文章

热门文章