Vue slot的用法

之前看官方文檔，由於自己理解的偏差，不知道slot是幹嘛的，看到小標題，使用Slot分發內容，就以為 是要往下派發內容。然後就沒有理解插槽的概念。其實說白了，使用slot就是先圈一塊地，將來可能種花種菜，也有可能在這塊地上建房子。然而slot可以以一當十，可以插入很多東西。不知明白否？

由於項目經驗有限，這篇我就先跟著官網的知識點走，當然會加入自己的部分項目代碼。

關於slot是這樣說的，

除非子組件模板包含至少一個 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤本身。

最初在 標籤中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

單個 Slot

在子組件內使用特殊的元素就可以為這個子組件添加一個 slot (插槽),在父組件模板裡,插入在子組件標籤內的所有內容將替代子組件的標籤及它的內容.示例代碼如下:

 


 
 
 


 
 

 
 
分發的內容

 
更多分發的內容

 
 

 
 
 
 
 

子組件 child-component 的模板內定義一個 元素,並且用一個

作為默認的內容,在父組件沒有使用 slot 時,會渲染這段默認的文本;如果寫入了 slot ,那就會替換整個 .所以上列渲染後的結果為:

 
 

 
分發的內容

 
更多分發的內容

 

注意:子組件內的備用內容,它的作用域時子組件本身.

具名 Slot

給 元素指定一個 name 後可以分發多個內容,具名 Slot 可以與單個 Slot 共存,例如下面的示例:

 
 
 


 
 

 
 
標題

  
正文內容

 
更多正文內容

 
底部信息

 
 

 
 
 
 
 

子組件內聲明瞭3個 元素,其中在

div id="app">
 

 

 
標題

 

  

 
正文內容

 
更多的正文內容

 

 

 
底部信息

 

 

 

在組合使用組件時,內容分發API至關重要.

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

閱讀更多 前端全棧架構丶 的文章

關鍵字: HTML 內容 軟件