slot是什么

slot，也稱插槽，可以類比為插卡式的FC游戲機(jī)，游戲機(jī)（子組件）暴露卡槽（插槽）讓用戶插入不同的游戲磁條（自定義內(nèi)容），游戲機(jī)會(huì)讀取并加載磁條里的游戲
Vue的slot，是組件的一塊HTML模板，這塊模板由使用組件者即父組件提供。可以說(shuō)是子組件暴露的一個(gè)讓父組件傳入自定義內(nèi)容的接口。

slot的作用

讓用戶可以拓展組件，去更好地復(fù)用組件和對(duì)其做定制處理
舉一些例子，比如布局組件、表格列、下拉選項(xiàng)

slot怎么用

slot的用法可以分為三類，分別是默認(rèn)插槽、具名插槽、作用域插槽
子組件中：

• 插槽用<slot>標(biāo)簽來(lái)確定渲染的位置，里面放如果父組件沒(méi)傳內(nèi)容時(shí)的后備內(nèi)容
• 具名插槽用name屬性來(lái)表示插槽的名字，不傳為默認(rèn)插槽
• 作用域插槽在作用域上綁定屬性來(lái)將子組件的信息傳給父組件使用，這些屬性會(huì)被掛在父組件slot-scope接收的對(duì)象上

//Child.vue <template><div><main>//默認(rèn)插槽<slot>//slot內(nèi)為后備內(nèi)容<h3>沒(méi)傳內(nèi)容</h3></slot></main>//具名插槽<header><slot name="header"><h3>沒(méi)傳header插槽</h3></slot></header>//作用域插槽<footer><slot name="footer" testProps="子組件的值"><h3>沒(méi)傳footer插槽</h3> </slot> </footer></div> </template><style scoped> div{border:1px solid #000; } </style>

父組件在使用時(shí)：

• **默認(rèn)插槽 **的話直接在子組件的標(biāo)簽內(nèi)寫(xiě)入內(nèi)容即可
• 具名插槽是在默認(rèn)插槽的基礎(chǔ)上加上slot屬性，值為子組件插槽name屬性值
• 作用域插槽則是通過(guò)slot-scope獲取子組件的信息，在內(nèi)容中使用。這里可以用解構(gòu)語(yǔ)法去直接獲取想要的屬性

// Parent.vue <child><!-- 默認(rèn)插槽 --><div>默認(rèn)插槽</div> <!-- 具名插槽 --><div slot="header">具名插槽header</div><!-- 作用域插槽 --><div slot="footer" slot-scope="slotProps">{{slotProps.testProps}}</div> </child>

渲染結(jié)果為

v-slot

在vue2.6中。上述的API被軟廢棄（3.0正式廢棄），取而代之的是內(nèi)置指令v-slot，可以縮寫(xiě)為【#】

子組件用法保持不變，父組件中

• slot屬性棄用，具名插槽通過(guò)指令參數(shù)v-slot:插槽名的形式傳入，可以簡(jiǎn)化為#插槽名
• slot-scope屬性棄用，作用域插槽通過(guò)v-slot:xxx="slotProps"的slotProps來(lái)獲取子組件傳出的屬性
• v-slot屬性只能在template上使用，但在**【只有默認(rèn)插槽時(shí)】**可以在組件標(biāo)簽上使用

//Parent <template><child><!--默認(rèn)插槽--><template v-slot><div>默認(rèn)插槽</div></template><!--具名插槽--><template #header><div>具名插槽</div></template><!--作用域插槽--><template #footer="slotProps"><div>{{slotProps.testProps}}</div></template><child> </template>

拓展用法：

同樣可以通過(guò)解構(gòu)獲取v-slot={user},還可以重命名v-slot="{user:newName}"和定義默認(rèn)值v-slot="{user = '默認(rèn)值'}"

插槽名可以是動(dòng)態(tài)變化的v-slot:[slotName]

注意

默認(rèn)插槽名為default,可以省略default直接寫(xiě)v-slot,縮寫(xiě)為#時(shí)不能不寫(xiě)參數(shù)，寫(xiě)成#default(這點(diǎn)所有指令都一樣，v-bind、v-on)

多個(gè)插槽混用時(shí)，v-slot不能省略default

作用域插槽的原理

slot本質(zhì)上是返回VNode的函數(shù)，一般情況下，Vue中的組件要渲染到頁(yè)面上需要經(jīng)過(guò)template>>render function >> NVode >> DOM過(guò)程。組件掛載的本質(zhì)就是執(zhí)行渲染函數(shù)得到VNode，至于data/props/computed這些屬性都是給VNode提供數(shù)據(jù)來(lái)源

在2.5之前，如果是普通插槽就直接是VNode的形式了，而如果是作用域插槽，由于子組件需要再父組件訪問(wèn)子組件的數(shù)據(jù)，所以父組件下是一個(gè)未執(zhí)行的函數(shù)(slotScopre) => return h('div',slotScope.msg),接受子組件的slotProps參數(shù)，在子組件渲染實(shí)例時(shí)會(huì)調(diào)用該函數(shù)傳入數(shù)據(jù)。

在2.6之后，兩者合并，普通插槽也變成一個(gè)函數(shù)，只是不接受參數(shù)了

大綱速記

總結(jié)

以上是生活随笔為你收集整理的vue中slot（插槽）详解，slot、slot-scope和v-slot的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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