slot是什么

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

slot的作用

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

slot怎么用

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

• 插槽用<slot>標簽來確定渲染的位置，里面放如果父組件沒傳內容時的后備內容
• 具名插槽用name屬性來表示插槽的名字，不傳為默認插槽
• 作用域插槽在作用域上綁定屬性來將子組件的信息傳給父組件使用，這些屬性會被掛在父組件slot-scope接收的對象上

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

父組件在使用時：

• **默認插槽 **的話直接在子組件的標簽內寫入內容即可
• 具名插槽是在默認插槽的基礎上加上slot屬性，值為子組件插槽name屬性值
• 作用域插槽則是通過slot-scope獲取子組件的信息，在內容中使用。這里可以用解構語法去直接獲取想要的屬性

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

渲染結果為

v-slot

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

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

• slot屬性棄用，具名插槽通過指令參數v-slot:插槽名的形式傳入，可以簡化為#插槽名
• slot-scope屬性棄用，作用域插槽通過v-slot:xxx="slotProps"的slotProps來獲取子組件傳出的屬性
• v-slot屬性只能在template上使用，但在**【只有默認插槽時】**可以在組件標簽上使用

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

拓展用法：

同樣可以通過解構獲取v-slot={user},還可以重命名v-slot="{user:newName}"和定義默認值v-slot="{user = '默認值'}"

插槽名可以是動態變化的v-slot:[slotName]

注意

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

多個插槽混用時，v-slot不能省略default

作用域插槽的原理

slot本質上是返回VNode的函數，一般情況下，Vue中的組件要渲染到頁面上需要經過template>>render function >> NVode >> DOM過程。組件掛載的本質就是執行渲染函數得到VNode，至于data/props/computed這些屬性都是給VNode提供數據來源

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

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

大綱速記

總結

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

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