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

插槽的使用 - 具名插槽

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

如下代碼：

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

?

2.?父組件填充內(nèi)容,?父組件通過 v-slot:[name] 的方式指定到對應(yīng)的插槽中

?

3.展示的效果：

?

?

?

接下來再來看看，父組件中填充內(nèi)容的時候，順序調(diào)換下，看下能不能內(nèi)容能不能對應(yīng)上：

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

?

2.?展示的效果：

?

?

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。