在 Vue 中，插槽（slot）是實現(xiàn)組件內容分發(fā)的機制，允許我們將子組件的內容傳遞給父組件，從而提升組件的可復用性和靈活性。插槽的本質是通過將父組件內容傳遞到子組件指定的插槽位置，使得子組件在渲染時可以動態(tài)填充不同的內容。

1.?插槽的類型

Vue 中有幾種主要的插槽類型：

1、默認插槽（Default Slot）

默認插槽用于在組件沒有指定插槽時，將內容插入到子組件的默認位置。

🌰：

<!-- 父組件中傳遞內容 -->
<MyComponent><p>這是默認插槽內容</p>
</MyComponent><!-- 子組件模板 -->
<template><div><slot></slot></div>
</template>

2、具名插槽（Named Slot）

具名插槽允許我們通過 name?屬性指定插槽名稱，以便在父組件中為不同的插槽位置傳遞內容：

🌰：

<!-- 父組件中傳遞具名內容 -->
<MyComponent><template v-slot:header><h1>標題內容</h1></template><template v-slot:footer><p>底部內容</p></template>
</MyComponent><!-- 子組件模板 -->
<template><div><slot name="header"></slot><!-- 默認插槽 --><slot></slot><slot name="footer"></slot></div>
</template>

3、作用域插槽（Scoped Slot）

作用域插槽允許子組件向父組件提供數(shù)據(jù)，從而讓父組件可以根據(jù)該數(shù)據(jù)動態(tài)渲染插槽內容。適用于一些內容需要根據(jù)子組件提供的數(shù)據(jù)進行渲染的場景。

🌰：

<!-- 父組件 -->
<MyComponent v-slot:default="{ data }"><p>子組件提供的數(shù)據(jù)：{{ data }}</p>
</MyComponent><!-- 子組件模板 -->
<template><slot :data="someData"></slot>
</template><script>
export default {data() {return {someData: 'Hello slot'}}
}
</script>

2. 插槽的本質

插槽的本質是將父組件內容通過編譯成 vnode（虛擬節(jié)點），然后在子組件渲染時將這些 vnode 放置到子組件的指定位置。Vue 通過 vnode 的編譯與插槽的傳遞，將插槽內容與子組件進行動態(tài)綁定，這樣可以提升代碼復用性，并保持組件內部邏輯的獨立性。

當我們使用插槽傳遞數(shù)據(jù)時，實際傳遞的是一個對象 { }，每一個插槽對應對象的屬性。屬性名：插槽名，默認為 default，屬性值：函數(shù) function，返回值是虛擬節(jié)點。

{// 默認插槽default: function(){},// 具名插槽slot1: function(){},// 作用域插槽slot2: function({ msg}){},
}

因此，傳遞插槽也就是在傳遞函數(shù)，使用插槽在調用函數(shù)，返回虛擬節(jié)點。

3. 驗證結論

正常使用如下：

App.vue

<template><Comp><p>默認插槽：default slot</p><template #slot1><p>具名插槽：slot1</p></template><template #slot2="{ msg }"><p>作用域插槽：{{ msg }}</p></template></Comp>
</template><script setup>
import Comp from './components/Comp.vue'
</script>

Comp.vue

<template><div><slot></slot><slot name="slot1"></slot><slot name="slot2" msg="hello slot"></slot></div>
</template>

展示為：

下面使用 JS 實現(xiàn)一下：

Comp.js

import { createElementVNode } from 'vue'
export default {setup(_, { slots }) {console.log('~ slots:', slots)const defaultVNodes = slots.default()const slot1VNodes = slots.slot1()const slot2VNodes = slots.slot2({ msg: 'hello slot' })console.log('~ VNodes', defaultVNodes, slot1VNodes, slot2VNodes)return () => {return createElementVNode('div', null, [...defaultVNodes, ...slot1VNodes, ...slot2VNodes])}}
}

或者

import { defineComponent, h } from 'vue'
export default defineComponent({name: 'Comp',props: {},setup(props, { slots }) {return () =>h('div', [slots.default ? slots.default() : h('p', '默認插槽'),slots.slot1 ? slots.slot1() : h('p', '具名插槽 slot1'),slots.slot2 ? slots.slot2({ msg: 'Hello scoped slot' }) : null])}
})

插槽的本質就是在子組件中調用函數(shù)，創(chuàng)建虛擬節(jié)點顯示到頁面上。

4. 使用 slot 注意事項

1、避免濫用插槽

插槽雖然可以極大地提升組件的靈活性，但過多的插槽會使組件的 API 變得復雜，不易理解和維護。

2、作用域插槽的命名

為了代碼可讀性，使用作用域插槽時建議使用有意義的命名，如 v-slot:default="{ item }"?而不是 v-slot="{ data }"，這樣能讓代碼的含義更加清晰。

3、默認插槽內容

在設計組件時，可以為插槽設置默認內容，以便在父組件未傳遞內容時，插槽依舊可以展示一些基本信息。比如：<slot>默認內容</slot>。

4、避免嵌套過深的插槽結構

深層嵌套的插槽結構可能會導致代碼可讀性差，同時也會增加渲染的復雜度，因此在設計組件時盡量保持插槽的扁平結構。