Vue 學習筆記：v-for 循環引用組件

@[TOC]

背景

前端開發過程當中，須要動態添加操做面板，而操做面板能夠封裝成獨立的組件，被父組件引用。好比這個添加收貨信息的場景，父組件中能夠添加多個收貨地址：

要實如今父組件中動態添加組件的功能有哪些技術點呢？本文來討論一下這個簡單場景裏面的技術要點。

v-for 循環建立子組件

顯然，父組件應該使用 v-for 來建立多個子組件，這裏父子組件須要進行雙向通訊，表現爲：

1. 編輯操做，父組件回顯信息時，須要傳遞給子組件收貨信息；
2. 父組件的保存操做，須要收集子組件的數據。

因此呢，要用兩種組件通訊方式 props 和 $refs。父組件傳遞給子組件的 props 數據，雖然只能由父組件修改，可是它也是子組件的數據，子組件能夠讀取、但不能修改；同時，子組件又須要維護本身的數據，便於子組件編輯。

爲了達到雙向通訊的目的，能夠採起的操做以下：

1. 子組件維護本身的數據，但數據的初始化是利用 props 完成的；
2. 父組件使用 v-for 建立子組件時，爲每一個組件設置 ref 屬性，經過 $refs 獲取每一個子組件的數據。

這裏有個知識點，值得關注，父組件的 v-for 語句中怎麼動態設置子組件的 ref 屬性呢？

找到的解決方案是使用字符串的佔位符號拼接上 index 來設置，例如，建立 N 個 el-button 子組件，且爲每一個組件設置各自的 ref 名稱，代碼以下：

<el-button 
        :key="index" 
        :ref="`btn${index}`"
         v-for="(btn,index) in btns">
          {{ btn.name}}
    </el-button>
複製代碼

v-for 循環建立子組件常見的一個警告是Component lists rendered with v-for should have explicit keys.，因此須要綁定這個屬性 :key="index" 。

組件封裝

封裝原型圖中的 Child 標記的組件，命名爲 AddressPanel，組件參數有：

參數	說明
address	屬性：地址
postCode	屬性：郵編
telephone	屬性：電話
panelIndex	屬性：當前面板的編號，remove 事件時須要
@addPanel	事件：添加一個面板，父組件的 panels 添加一個新記錄
@removePanel	事件：刪除一個面板，移除父組件的 panels[panelIndex] 處的記錄

AddressPanel 組件定義的僞代碼：

props: ['address', 'postCode', 'telephone', 'panelIndex'],
data(){
   return {
        data:{ //保證能修改數據，使用 props 屬性來初始化數據
            address:address,
            postCode:postCode,
            telephone:telephone
        }
   }
}
複製代碼

父組件引用的僞代碼：

<div v-for="(panel, index) in panels">
     <address-panel
         :address="panel.address"
         :postCode="panel.postCode"
         :telephone="panel.telephone"
         :panelIndex="index"
         :ref="`panel${index}`"
     </address-panel>
</div>

複製代碼

啓示錄

本文探討的是父子組件雙向通訊的方式，以及 v-for 循環建立子組件時怎麼動態設置 ref 屬性，都是 Vue 基本的知識點，由於封裝一個能夠重複動態添加的組件而遇到的問題。

測試動態 ref 時，用了 ElementUI 的在線運行編輯器，多是國外的服務器，也多是家裏網絡太慢，響應時間非常磨人的。這是今天 Vue 學習的內容，又離入門近了一點！