vue页面打开列表第一个点击事件

vue实现自动点击事件，刚进入页面即发生点击事件。

这里用的是vue的可移步到vue文档。自定义指令directive，具体使用

1若是没有v-for循环，则直接放入directive自定义指令。

2若是有v-for循环，需要自动点击索引第一个，则需要binding。

ref可以绑定dom节点或字组件，用于获取子组件的方法和属性。但是只有组件 完成渲染 时，才可以获取得到，且$refs也不是响应式的！

响应式处理可以包括以下几种方法：也就是说，在子组件完成渲染以后，动态修改的data或method，在父组件都可以实时获取。

（1）使用nexttick（）；子组件 同步 更改数据可反映到父组件上，nexttick属于微任务，也就是说，在本轮事件循环完成之前，可以执行异步 *** 作，从而保证实时性。

（2）如果子组件数据更新是异步，比如说从接口请求回来的这种，使用nexttick，甚至settimeout(()=>{},0) 都无法读取到已经修改的data，因为在消息队列里面，异步任务作为宏任务始终排在队尾。常发生的情况是，接口请求的数据还没到，父组件中已经读取了refs[componets]xxx的数据，这会导致这个数据打印出来是undefined。

解决办法是：

>>>settimeout(100ms）的等待，这种方法虽然可以解决，但是非常不好，原因是你无法控制接口要多少秒才能到达响应结果

打印结果：

由此可见 settimeout 0 会在接口响应前执行。

>>> 使用回调的方式。接口响应完，在then里，通过$emit触发父组件获取refs的方法。这种回调必然可以保证数据已经set到，再次手动获取，即可得到响应值。

（3）以上分别用于解决子组件同步和异步的问题，但如果子组件使用v-if（资料发现v-for同样会有这种问题），子组件未被渲染，同样会出现$refs无法读取的问题。暴力解决法是，v-if换成v-show。区别在于：v-show不会发生重拍，只是display：none。这种方式虽然可以保证 $refs获取到子组件的数据，但在某些特定的业务场景下（比如子组件请求必须在父组件完成某 *** 作的时候进行），会导致一些逻辑错误。因此合理的解决办法是，用（2）中回调的方法。

其他解决办法待更新

EventBus 又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

废话不多说，直接开始使用 EventBus

要用 EventBus ，首先要初始化一个 EventBus ，这里称它为全局事件总线。

发送事件的语法： this$EventBus$emit(发送的事件名,传递的参数)

已经创建好 EventBus 后我们就需要向它发送需要传递的事件，以便其他组件可以向 EventBus 获取

例子：有两个组件A和B需要通信，他们不是父子组件关系， B 事件需要获得 A 事件里的一组数据 data

接收事件的语法： this$EventBus$on(监听的事件名, 回调函数)

A 组件已经向全局事件总线 EventBus 发送了一个 aMsg 事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

B组件展示结果：

在上一个例子中，我们A组件向事件总线发送了一个事件 aMsg 并传递了参数 MsgA ，然后 B 组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开 B 组件，然后再次进入B组件时，又会触发一次对事件 aMsg 的监听，这时时间总线里就有两个监听了，如果反复进入 B 组件多次，那么就会对 aMsg 进行多次的监听。

1解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听

2语法： this$EventBus$off(要移除监听的事件名)

在你的vue组件中，可以通过@clicknative处理table行点击事件，然后在该函数中通过eventcurrentTargetrowIndex获取到当前点击的行的索引，从而判断点击的是哪一行。

诉求：在做后台系统用户组权限这块，后台要求点击多选框时把当前ID传过去

但ivew Checkbox组件文档写的不全，于是研究了一番

CheckboxGroup v-model绑定所有勾选项，格式为数组、on-change事件可以获取当前所有勾选项，格式为数组

Checkbox用@clicknative绑定点击事件(直接用@click无反应)，然后在事件里进行相应的 *** 作，把id传给后台

但是写的过程中发现了iview的bug,就是CheckboxGroup v-model绑定的数组渲染时后出现错误，会勾选错误，于是只能放弃iview用原始的checkbox

用原生checkbox就灵活多了，加@click,@change都可以，而且可以把数组直接传入方法里，也不需要$event获取

然后渲染勾选项直接v-model绑定就好，不用再处理为数组

写到这里请让我说一声iview垃圾！！！

对了说一句项目里用的iview2x by the way

1、首先创建一个名称为onload的html文件，如下图所示。

2、设置标题为 javascript  onload，如下图所示。

3、在body标签 中加入onload事件，并在事件中加入自定义函数 myonload。

4、在文档区域加入一个h 元素，加入文本内容“页面加载完成显示页面内容”，当页面加载完成 后 显示该内容。

5、创建一个自定义函数myload，当页面完成后，调用该自定义函数，并加入alert提示语。

6、在浏览器中打开该文件，首先会d出页面加载完成后调用的myonload函数，在现实页面内容。

以上就是关于vue页面打开列表第一个点击事件全部的内容，包括:vue页面打开列表第一个点击事件、vue获取使用$refs获取自组件方法和属性注意问题、vue 事件总线EventBus的概念、使用以及注意点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！