Vue組件之做用域插槽

寫做用域插槽以前，先介紹一下Vue中的slot內容分發：

若是<child-component></child-component>標籤之間沒有插入那兩個p標籤的話，頁面會顯示子組件模板中定義的「<p>父組件若是沒有插入內容，我將被顯示</p>」這一則內容，但若是<child-component></child-component>標籤之間有插入內容的話，則子組件模板中的<slot></slot>標籤以及之間的內容都會被替換成<child-component></child-component>標籤之間插入的內容。

這裏子組件<slot>內的備用內容，做用域是子組件自己；

做用域插槽：

顯示結果：

template內能夠經過臨時變量props來訪問來自子組件插槽的數據msg

做用域插槽更具表明性的用例是列表組件：

子組件<my-list></my-list>接受一個父組件傳過來的books數組。而且將它在name爲book的slot上使用v-for循環，同時暴露變量bookName，父組件的my-list標籤內就能夠經過props.bookName訪問到綁定的數據；

做用域插槽的使用場景：既能夠複用子組件的slot，又能夠使slot內容不一致；