記錄一下關于vue的坑

       最近部門做了一個前後端分離項目（公司前後端不分），苦逼的我就被分到了前端。然後就是無休止的開會定開發分案，前後端架構等等。

       二周後，項目讨論架構完成，後端使用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(){}），意思也是一樣，在頁面加載完成之後調用的方法。對于使用者來說，如果不是網絡太卡的情況是感覺不到加載順序的。

先到這裡，等下次有時間繼續更新、、

因為是公司電腦，加密的，不能截圖，複制都不行，請大家見諒哈！