vue中的点击事件

是一个自己总是记不太清的属性：

几个相同的元素，添加同样的一个点击事件处理程序来做处理，需要将元素自身

传递给事件处理程序来改变元素自身的一些属性，或者行为：

Tab(num,event){

var e = eventcurrentTarget // 这样获取到的是被点击的元素自身

var c = eventtarget // 这样获取到的是点击元素的子元素

}

子

Vue的极大程度的帮助减少了对dom的 *** 作，其中获取元素的方式主要通过添加ref属性，但是当获取 this$refs 属性时，稍有不注意就会输出undefined导致我们对dom节点的 *** 作报错。 this$refsxxx 为undefined的几种情况记录：

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

概述

每一个vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。

在vue-cli 项目中，src 文件夹下有一个Appvue 文件，它的script标签中，import Hello from '/components/Hello'，那么Appvue 就是父组件，components 文件夹下的Hellovue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。

父------子

父组件向子组件传值, 它主要是通过元素的属性进行的 在Appvue 的template中,有一个, 这就是我们引入的子组件  给其添加属性如mes-father="message from father";  父组件将数据传递进去,子组件需要接收才能使用 怎样接收呢

在Hellovue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据 props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应 

注意： 在父组件,就是在 元素中定义的属性是mes-father， 没有一一对应啊  这主要是因为，在html 元素中大小写是不敏感的。 如果我们写成， 里面的mesFather  就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据， 如果在js 文件中，我们定义props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的， 只能写成props: ["mesfather"]  但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是- 表示，它 自动会转化成驼峰式。传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。props 属性是和data，methods 属性并列的，属同一级别。props 属性里面定义的变量，在 子组件中的template 中可以直接使用。

Appvue文件：

Hellovue文件：

这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。

子------父

子组件向父组件传递数据，需要用到自定义事件。 例如，我们在Hellovue，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。

在Hellovue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter

Hellovue文件：

在Appvue 中，template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据{{childMes }}</p>

相应地，在scrpit中，data 中，定义一个变量childMes, 并在methods 中，定义一个事件处理函数reciever。

Appvue文件：

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。 

当在input输入框中输入数据，并按enter键时，它会触发keypressenter事件，从而调用事件处理函数enter， 在enter 中， 我们发射了一个事件valueUp， 并携带了一个参数，由于在<hello @valueUp=”recieve”></hello> 组件中， 我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件， 当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。

谢谢！结束！

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

一般使用 v-for 遍历数组然后给每个子元素绑定 onClick 方法然后传入下标：

但如果列表很长需要渲染的元素很多，在每一个子元素上都绑定 onClick 方法会消耗性能。

可以使用事件代理，只在父元素上绑定 onClick 方法，在子元素上绑定自定义属性 data-index ，赋值下标，当点击子元素时，父元素的点击事件捕获子元素的点击事件，然后在点击事件的回调函数中使用 etargetgetAttribute('data-index') ，来获取绑定在自定义属性 data-index 上的下标：

组件是可以复用的vue实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

全局注册 局部注册

父子组件通信：从父（组件）到子（组件里边的元素），用props属性绑定

以上就是关于vue中的点击事件全部的内容，包括:vue中的点击事件、vue里的$refs属性要注意的点、vue如何获取表格某行数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！