Vue中插槽的使用。


寫在前面:

  vue中插槽的使用讓組件變得更加靈活。使得封裝一個組件的復用性和API的暴露更加靈活多變。

當組件當做標簽使用的時候,在標簽里面的元素不會顯示,這個時候就需要用到插槽。

一、最基本的使用

  當組件當做標簽使用的時候,在組件標簽內部的標簽往往不顯示,這個時候就需要用到插槽。寫在組件標簽內部的標簽需要在該組件標簽內部使用solt接收,solt標簽會將所有標簽在同一位置接收顯示。但是靈活的不高。

二、命名插槽的使用

  給組件標簽內部標簽添加一個solt的屬性,屬性值為插槽的名字。在組件內部使用solt標簽進行接收,solt標簽添加一個name屬性,name的屬性值為solt的屬性值,這樣可以在不同位置進行顯示,加大了插槽的靈活度。

三、作用域插槽

  當組件當做標簽使用的時候,如果需要將插槽中的數據需要使用組件內部數據的時候,需要在組件內部的標簽外部添加一個template的標簽,添加一個scoped的屬性,值為任意值(porps),用來接收組件內部傳遞過來的值。通過屬性值(props).屬性(組件內部定義屬性)接收。

在這里說一下封裝一個組件需要注意的問題:

  1,組件的復用性。

  2,需要暴露的API。

在這里舉一個例子,如何封裝一個輪播圖,在這里先考慮的是輪播圖的結構是否一樣,如果結構是定死的,我們就不必使用插槽,直接將輪播圖組件寫死,把輪播圖使用的數據暴露出去,這樣便於數據的更新。如果輪播圖的樣式不一,可以使用插槽來增強輪播圖的靈活度,把樣式暴露出去,數據寫在輪播圖組件里。

  


免責聲明!

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



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