?????? 最近部门做了一个前后端分离项目（公司前后端不分），苦逼的我就被分到了前端。然后就是无休止的开会定开发分案，前后端框架等等。

?????? 二周后，项目讨论架构完成，后端使用springboot，前端使用vue加ant-design-pro(第一次听说)，交接使用swagger，当然，对于我来说，vue和ant我都是不会的，所以开始学习阶段，学习二周后开始开发项目。

?????? 内容就不多说了，直接入正题。

?????? 。。。。。。

?????? 其实用了vue之后才发现，以前jq代码真的太low了。不管是页面赋值还是页面跳转，vue碾压jsp。当然，我写这个博客不是来夸vue的，是来记录一些关于vue的一些坑的（真的坑）。

?????? 坑1（tab标签页使用v-for动态渲染tab的title使用this.$refs.tabs.mothed()无法找到对应的子组件）：这个问题用过vue的大家都应该或多或少的遇到过，需求是一个菜单是列表页，通过点击按钮和操作中的超链接去相应的增改操作页面，使用ant的tabs组件。页面分析：当前页是一个大组件，列表页、新增页、修改页都是其子组件，页面动态渲染当前组件组件，这里我就使用v-for循环加载子组件的方式：

<a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
    <edit :edit='edit' @formsave='formsave' ref='update' />
    ....
 </a-tab-pane>

因为我需要在点击的时候动态加载哪个子组件并给子组件内容赋值：

_this.$refs.update.setField(obj)

需求：点击修改的将对象带给子组件并通过查找数据库加载其他内容。

问题：通过页面debug，发现this.$refs中并没有update这个子组件。

解决：因为是debug，所以直接从对象中找发现$refs.update竟然是个数组，然后就百度证实了一下，具体原因自己点进去看下https://www.jianshu.com/p/8617f8852df7

这个问题真的坑，如果不是debug我就是找不到原因，无从下手，这个问题再次记录，之后就是在v-for中使用ref的时候，获得值去渲染子页面的时候就是用数组的方式：

_this.$refs.update[0].setField(obj)

坑2（调用子组件方法赋值，使用子组件页面中获取后台的参数获取不到）：在点击修改的时候，要做一些操作：1、页面跳转 2、页面赋值??? 关于页面跳转上一个问题已经解决；页面赋值：

_this.$refs.show[0].setField(obj)

以上代码就是调用show这个子组件的setField这个方法，并带obj参数；页面效果就是页面跳转了，但是直接报错没有赋值，setField is? undefined就是说这个方法不存在，但是是存在的。通过debug发现，到这个方法的时候页面对象是存在的，但是里面没有我定义的其他属性和方法，所以没有setField这个方法了。

解决:这个问题就是说你在页面没有加载完成的时候去调用里面的方法，这样当然是没有的了，二个解决方法：1.使用定时器setTimeout()等0.5秒后执行，2.就是直接使用vue钩子this.$nextTick(function(){}），意思也是一样，在页面加载完成之后调用的方法。对于用户来说，如果不是网络太卡的情况是感觉不到加载顺序的。

?

?

先到这里，等下次有时间继续更新、、

因为是公司电脑，加密的，不能截图，复制都不行，请大家见谅哈！

?

cs