插槽的最最簡單使用，上面已有例子，這里就不寫了，接下來看看，插槽其他使用場景

插槽的使用 - 具名插槽

描述：具名插槽其實就是給插槽娶個名字。一個子組件可以放多個插槽，而且可以放在不同的地方，而父組件填充內容時，可以根據這個名字把內容填充到對應插槽中。

如下代碼：

1.?子組件的代碼，設置了兩個插槽(header和footer)：

?

2.?父組件填充內容,?父組件通過 v-slot:[name] 的方式指定到對應的插槽中

?

3.展示的效果：

?

?

?

接下來再來看看，父組件中填充內容的時候，順序調換下，看下能不能內容能不能對應上：

1. 子組件代碼不變，父組件代碼中填充順序調換下(如圖，在父組件中，footer 和 header 的填充位置對換)：

?

2.?展示的效果：

?

?

?

?　　由此看出，即使父組件對插槽的填充的順序打亂，只要名字對應上了，就可以正確渲染到對應的插槽中。即：?父組件填充內容時，是可以根據這個名字把內容填充到對應插槽中的

總結

以上是生活随笔為你收集整理的前端学习（2619）：vue插槽--具名插槽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。