vue自动触发事件

项目中进入页面 先请求后台渲染一个列表，然后点击每个列表过后，再次请求后台加载该列表项下面的子列表，类似异步加载树行结构数据。

现在效果已经实现，但是需求需要当页面进入的时候，就要把第一个列表项的第一个节点默认打开，方案有2种

再请求完成初始列表后，携带父列表里面相关的参数，接着发起下一级的请求，该方案适合只有2级的情况，用自定义指令可以实现多级的触发

参考文献 >

Buttondemo组件

一、Button组件根元素是button

当我们点击Buttondemo组件click事件时候，正常情况下，点击完就会将事件传入到Button组件中根元素button上。这时我们点击打印出“hi”

但是如果Button组件根元素不是button，而是div时候，这个时候事件是传入div上，而不是button元素上。

二、Button组件根元素是div

当我们点击Buttondemo组件click事件时候，点击完就会将事件传入到Button组件中根元素div上，这时只要我们点击这个div边框之内都能触发click事件。

三、如何让根元素div里面button触发click事件，

（1）、首先让div不要继承click属性: inheritAttrs:false

（2）、让div里的button绑定事件: v-bind=$attrs $attrs是指所有事件

四、当有多个事件属性传入，如何自主放置在不同元素进行触发

（1）、利用contextattrs获取所有属性

（2）、利用ES6析构函数{size,focus,mouseover,click}=contextattrs

（3）、再在不同元素上绑定上面size或focus等

Buttondemo组件

Button组件

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）中回调的方法。

其他解决办法待更新

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

本文是 Vue实战 系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用 。Falcon项目地址： >

el-input id = "usernames" v-model="formusername" v-bind:style = {"disabled:isDisabled"}></el-input>

data(){

return{

isDisabled:true

}

}

后来又想到使用jquery来改变属性,但是这个也没用

$(document)ready(function(){

$('submitButton')hide();

$('reviseButton')click(function () {

$(this)hide();

$('submitButton')show();

$('#username')attr("disabled",true);

$('#qq')addAttr("disabled");

以上就是关于vue自动触发事件全部的内容，包括:vue自动触发事件、(Vue -05) v-model指令 + 绑定事件 + 深度响应式、Vue 事件属性绑定默认和修改等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！