异步请求-数据传递

解决了一个困扰了一天的bug

基本信息描述

就是一个创建主题的界面  
在没有进行操作的时候 第一次进入需要弹框进行填写 数据库用户名和密码等操作  
填写完之后会返回一个数据库表名的数组  
弹框是一个子组件 通过获取信息有没有存储在本地来判断是否是第一次操作  

---

我的基本思路

  
1.当弹框信息填写完毕 提交之后 会请求接口获取 数据库表数组
2.请求成功之后 将数组信息存放到 sessionStorage 里面
3.通过 $emit在点击确定按钮的时候 把信息发送给父组件 关闭弹框
4.然后父组件就可以直接获取到信息并且渲染出来

---

bug描述

问题就在于 子组件是基于父组件而存在的  
父组件是渲染完成之后 才会显示的子组件
在点击确定按钮的时候 发送请求是异步的
所以会先执行$emit操作和弹框关闭操作
所以传递过去的值 是空的!!!

/**
在父组件 可以正常打印 但是就是不能渲染在页面上
一开始 我以为是因为传的是对象 不能渲染页面用 $set 但没有任何作用
然后我就觉得是父组件获取数据太快 用定时器的方法来异步获取数据 也不行

后面以为是传值的原因 用了vuex，refs啥啥啥的 都没有成功

后面在弹框组件内 保存按钮的函数下打印数据 发现打印的值为空！这个时候才定位到错误源
*/

解决

原因我猜想是请求接口是异步的，所以用$emit传递的时候 数据还没有被赋值
所以用setTimeout延迟操作了200ms
同样弹框状态也要和$emit一样延迟
然后父组件就可以正常获取到数据了