站長(zhǎng)資訊網(wǎng)
使用場(chǎng)景：通過slot（插槽）可以讓用戶可以拓展組件，去更好地復(fù)用組件和對(duì)其做定制化處理；如果父組件在使用到一個(gè)復(fù)用組件的時(shí)候，獲取這個(gè)組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情。通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個(gè)復(fù)用組件在不同場(chǎng)景的應(yīng)用；比如布局組件、表格列、下拉選、彈框顯示內(nèi)容等。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
slot是什么
在HTML中 slot 元素 ，作為 Web Components 技術(shù)套件的一部分，是Web組件內(nèi)的一個(gè)占位符
該占位符可以在后期使用自己的標(biāo)記語言填充
舉個(gè)栗子
<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不會(huì)展示到頁(yè)面中，需要用先獲取它的引用，然后添加到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在組件模板中占好了位置，當(dāng)使用該組件標(biāo)簽時(shí)候，組件標(biāo)簽里面的內(nèi)容就會(huì)自動(dòng)填坑（替換組件模板中slot位置），作為承載分發(fā)內(nèi)容的出口
可以將其類比為插卡式的FC游戲機(jī)，游戲機(jī)暴露卡槽（插槽）讓用戶插入不同的游戲磁條（自定義內(nèi)容）
使用場(chǎng)景
通過插槽可以讓用戶可以拓展組件，去更好地復(fù)用組件和對(duì)其做定制化處理
如果父組件在使用到一個(gè)復(fù)用組件的時(shí)候，獲取這個(gè)組件在不同的地方有少量的更改，如果去重寫組件是一件不明智的事情
通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個(gè)復(fù)用組件在不同場(chǎng)景的應(yīng)用
比如布局組件、表格列、下拉選、彈框顯示內(nèi)容等
分類
slot可以分來以下三種：
-
默認(rèn)插槽
-
具名插槽
-
作用域插槽
默認(rèn)插槽
子組件用<slot>標(biāo)簽來確定渲染的位置，標(biāo)簽里面可以放DOM結(jié)構(gòu)，當(dāng)父組件使用的時(shí)候沒有往插槽傳入內(nèi)容，標(biāo)簽內(nèi)DOM結(jié)構(gòu)就會(huì)顯示在頁(yè)面
父組件在使用的時(shí)候，直接在子組件的標(biāo)簽內(nèi)寫入內(nèi)容即可
子組件Child.vue
<template> <slot> <p>插槽后備的內(nèi)容</p> </slot> </template>
父組件
<Child> <div>默認(rèn)插槽</div> </Child>
具名插槽
子組件用name屬性來表示插槽的名字，不傳為默認(rèn)插槽
父組件中在使用時(shí)在默認(rèn)插槽的基礎(chǔ)上加上slot屬性，值為子組件插槽name屬性值
子組件Child.vue
<template> <slot>插槽后備的內(nèi)容</slot> <slot name="content">插槽后備的內(nèi)容</slot> </template>
父組件
<child> <template v-slot:default>具名插槽</template> <!-- 具名插槽?插槽名做參數(shù) --> <template v-slot:content>內(nèi)容...</template> </child>
作用域插槽
子組件在作用域上綁定屬性來將子組件的信息傳給父組件使用，這些屬性會(huì)被掛在父組件v-slot接受的對(duì)象上
父組件中在使用時(shí)通過v-slot:（簡(jiǎn)寫：#）獲取子組件的信息，在內(nèi)容中使用
子組件Child.vue
<template> <slot name="footer" testProps="子組件的值"> <h3>沒傳footer插槽</h3> </slot> </template>
父組件
<child> <!-- 把v-slot的值指定為作?域上下?對(duì)象 --> <template v-slot:default="slotProps"> 來??組件數(shù)據(jù)：{{slotProps.testProps}} </template> <template #default="slotProps"> 來??組件數(shù)據(jù)：{{slotProps.testProps}} </template> </child>
小結(jié)：
-
v-slot屬性只能在<template>上使用，但在只有默認(rèn)插槽時(shí)可以在組件標(biāo)簽上使用 -
默認(rèn)插槽名為
default，可以省略default直接寫v-slot -
縮寫為#時(shí)不能不寫參數(shù)，寫成
#default -
可以通過解構(gòu)獲取
v-slot={user}，還可以重命名v-slot="{user: newName}"和定義默認(rèn)值v-slot="{user = '默認(rèn)值'}"
