我們再來學習一些插槽相關的進階文法，
示例代碼：
代碼解讀：
我們通過代碼的案例來學習插槽的簡寫，比如說你現在寫了兩個具名的插槽，你要寫v-slot 冒号head，你可以把它簡寫成井号head這樣的文法就可以了：
你會發現具名插槽 你可以通過這樣的一個井号的文法對它做簡寫。
接着來學習作用域插槽，它是怎麼一回事？
我來給大家舉一個例子。首先我定一個子元件叫做list，在這裡面我定一個資料 data，return一個list，它就是一個數組，123就可以了:
我們定義了一個123這樣的數組，然後我們在這裡寫一個div去對123做循環，怎麼循環呢？
示例代碼：
V-for等于item in list。這裡用item就行了，然後我上面元件就去調用下面的叫做list的元件:
代碼解讀：
子元件調用一個子元件，子元件裡面有一個資料做循環，但是假設有這樣一個需求，我現在到底是通過div标簽去做我子元件的循環 還是通過其他的标簽做子元件的循環？
我可以由外部元件來決定，也就是說我不把它寫死，我可以由外部傳給我，想做到這個功能怎麼做？
我們可以這麼去寫，我們可以通過一個作用域插槽來寫。
首先我在這裡告訴子元件你的循環該怎麼去展示，
比如說我不用div了，我用一個span标簽來展示我的子元件裡面的每一項的内容，
我調子元件的時候，把 span 标簽通過slot傳給子元件。那麼在子元件裡面怎麼去用傳遞過來的 内容 ？
代碼示例：
代碼解讀：
在這裡是不是就可以用slot的内容了。用了它之後我們需要怎麼去做？
我們現在循環的就不是div标簽了，循環的就是slot了，
接着循環slot的時候，slot不知道它要展示什麼，如果你這麼去寫的話，它隻會展示三個span标簽，因為它不知道中間的内容應該展示什麼。
重新整理頁面，不會報錯，你點開頁面上應該會有三個span标簽:
因為你傳遞過來了一個slot，我這塊把slot循環了三次，接着我要想把123循環的時候讓slot做一個展示，可以怎麼寫?
ni可能會想直接在這寫:
你不是循環嗎？調用我上面傳遞過來這個span标簽嗎？我把item傳遞給你這個slot标簽，slot标簽是不是在這裡直接能用這個item?
這樣寫沒有任何的效果。
如果你在父元件裡寫 item 的内容，ta會到父元件裡面去找 item 對應的值，但實際上你這個item是在子元件裡的，是以你這麼用是不行的，那想去用它該怎麼辦呢？
我們調用slot的時候需要通過屬性的形式把對應的參數傳給slot，我們把item通過一個叫做item這樣的屬性傳給 slot：
slot這塊我就可以去接收，怎麼接受？
在這一塊我們寫内容的時候調list元件的時候，我就可以寫一個v-slot等于slotProps，意思是什麼？
你調我slot的時候把一些東西傳給我了，所有傳遞給我的内容我都放到slotProps裡面去接收。
那麼在這裡我直接可以通過slotProps點item擷取到你調用我的時候傳遞給我的一些内容，通過span我可以展示它，我改成div，它應該變成三行。
我們寫完了作用域插槽之後，我們再來回過來研究一下它的執行流程。
首先我父元件調用list 子元件，這塊就是傳遞給子元件的一個slot：
那麼我在子元件裡面去循環我内容的時候，我去調用這個slot，意思就是我要通過div這種形式去展示我的内容，但是我在調slot的時候，我把一些資料傳給slot，把哪些資料傳給slot？
把item這些資料傳給slot，slot怎麼接收它？
通過v杠slot等于slotProps這樣的資料對象，
所有你傳遞過來的内容都在slotProps裡面去接收，那麼接收你傳過來的内容之後，在這裡我就可以用 item 傳遞過來的值了:
父元件調子元件的時候傳slot進來，子元件再通過屬性的形式把資料傳給父元件，父元件拿到内容之後再決定它怎麼顯示。
上面代碼可以簡寫成：【叫解構】
因為你slotProps接收到的是你傳給 slot所有的内容，我現在隻用
{item}
，你可以直接在這裡去把item解構出來，你下面直接就可以用
{{item}}
。
我們回憶一下作用域插槽解決了什麼問題，解決的就是當子元件渲染的内容要由父元件決定的時候，比如說你到底要怎麼展示這個清單是由父元件決定的時候，我就可以通過這個作用域插槽來實作。