使用場景：通過slot（插槽）可以讓用戶可以拓展組件，去更好地復用組件和對其做定制化處理；如果父組件在使用到一個復用組件的時候，獲取這個組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情。通過slot插槽向組件內部指定位置傳遞內容，完成這個復用組件在不同場景的應用；比如布局組件、表格列、下拉選、彈框顯示內容等。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

slot是什么

在HTML中 slot 元素 ，作為 Web Components 技術套件的一部分，是Web組件內的一個占位符

該占位符可以在后期使用自己的標記語言填充

舉個栗子

<template id="element-details-template">   <slot name="element-name">Slot template</slot> </template> <element-details>   <span slot="element-name">1</span> </element-details> <element-details>   <span slot="element-name">2</span> </element-details>

template不會展示到頁面中，需要用先獲取它的引用，然后添加到DOM中，

customElements.define('element-details',   class extends HTMLElement {     constructor() {       super();       const template = document         .getElementById('element-details-template')         .content;       const shadowRoot = this.attachShadow({mode: 'open'})         .appendChild(template.cloneNode(true));   } })

在Vue中的概念也是如此

Slot 藝名插槽，花名“占坑”，我們可以理解為solt在組件模板中占好了位置，當使用該組件標簽時候，組件標簽里面的內容就會自動填坑（替換組件模板中slot位置），作為承載分發(fā)內容的出口

可以將其類比為插卡式的FC游戲機，游戲機暴露卡槽（插槽）讓用戶插入不同的游戲磁條（自定義內容）

使用場景

通過插槽可以讓用戶可以拓展組件，去更好地復用組件和對其做定制化處理

如果父組件在使用到一個復用組件的時候，獲取這個組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情

通過slot插槽向組件內部指定位置傳遞內容，完成這個復用組件在不同場景的應用

比如布局組件、表格列、下拉選、彈框顯示內容等

分類

slot可以分來以下三種：

• 默認插槽

• 具名插槽

• 作用域插槽

默認插槽

子組件用<slot>標簽來確定渲染的位置，標簽里面可以放DOM結構，當父組件使用的時候沒有往插槽傳入內容，標簽內DOM結構就會顯示在頁面

父組件在使用的時候，直接在子組件的標簽內寫入內容即可

子組件Child.vue

<template>     <slot>       <p>插槽后備的內容</p>     </slot> </template>

父組件

<Child>   <div>默認插槽</div>   </Child>

具名插槽

子組件用name屬性來表示插槽的名字，不傳為默認插槽

父組件中在使用時在默認插槽的基礎上加上slot屬性，值為子組件插槽name屬性值

子組件Child.vue

<template>     <slot>插槽后備的內容</slot>   <slot name="content">插槽后備的內容</slot> </template>

父組件

<child>     <template v-slot:default>具名插槽</template>     <!-- 具名插槽?插槽名做參數(shù) -->     <template v-slot:content>內容...</template> </child>

作用域插槽

子組件在作用域上綁定屬性來將子組件的信息傳給父組件使用，這些屬性會被掛在父組件v-slot接受的對象上

父組件中在使用時通過v-slot:（簡寫：#）獲取子組件的信息，在內容中使用

子組件Child.vue

<template>    <slot name="footer" testProps="子組件的值">           <h3>沒傳footer插槽</h3>     </slot> </template>

父組件

<child>      <!-- 把v-slot的值指定為作?域上下?對象 -->     <template v-slot:default="slotProps">       來??組件數(shù)據(jù)：{{slotProps.testProps}}     </template>     <template #default="slotProps">       來??組件數(shù)據(jù)：{{slotProps.testProps}}     </template> </child>

小結：

• v-slot屬性只能在<template>上使用，但在只有默認插槽時可以在組件標簽上使用

• 默認插槽名為default，可以省略default直接寫v-slot

• 縮寫為#時不能不寫參數(shù)，寫成#default

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