（標題的解決方案在第二部分）
最近公司的一個項目中使用 Vue 2.0 + element UI 實現一個后台管理系統的前端部分，屬於商城類型。
一、前期思路：
其中在“所有訂單”頁面，UI 給的設計頁面如下：
圖 1 - 1 UI 設計圖.png
UI 理解：每個 Tab 點擊后展現的頁面都是這樣的管理表格，所以這一部分表格寫成組件。一開始采用的寫法是下面這樣的：
圖 1 - 2 前期實現.png
寫完覺得代碼很繁復，我在實現狀態標識 + 對應的數量時，也發現上述寫法不利於將 label 綁定為動態數值，轉換思路和后端老哥溝通后改造了接口，返回數據的時候添加一下各個狀態及其對應的數量
二、最終的實現思路：
基於簡化代碼的思想，決定將這些 tabs 用循環的方式展現出來，寫法如下：
圖 2 - 1 最終實現.png
圖 2 - 2 定義的 tabList .png
因為要顯示相應的數量，從接口中拿數據后與 tabList 進行拼接，不過給各位的參考意義不大，處理如下：
圖 2 - 3 處理 tabList .png
下圖將體現解決方法的核心，那就是帶上對應的數組下標：
圖 2 - 4 何時調用.png
我采用的邏輯是點擊不同的 Tab 標簽，攜帶不同的參數去請求數據，圖 2 - 4 顯示在返回的數據 order 有變化時，將變化后的 order 傳值給子組件的 getOrderList 方法進行處理。這個時候就要解答標題了，因為 tabs 是循環出來的， console.log(this.$refs.child) 將顯示類似下圖：
圖 2 - 5 console.log(this.$refs.child).png
可以看出已經成了一個數組，這時候就需要我們加上下標再去調用相應的 tab 子組件方法，如下圖：
圖 2 - 6 確定 tabList 的 index.png
三、寫在最后
1、為何不像 Vue 編程之路（一）——父子組件之間的數據傳遞 中介紹的直接傳值
直接傳值在前期寫法中嘗試過，那是連請求數據都是在子組件中進行，所以有很多莫名其妙的 bug，比如每次請求數據后會再請求一次全部狀態的數據，導致顯示異常，轉換思路后在父組件請求數據，按 Tab 標簽分發對應的數據，這就需要將 Tab 標簽的數據傳入子組件的方法進行處理。
2、子組件在父組件中進行 v-for 循環前，因為 this.$refs.child 還不是數組，所以可以直接點出子組件的方法，這也是調用子組件方法的實現方案。
特殊點的就是子組件在父組件中進行 v-for 循環后， this.$refs.child 會變成一個數組，這時候再調用子組件的方法就要帶上數組的下標了，這個下標如何來，可以參考這篇隨筆第二部分的內容。