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內容不一致;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM