聊聊Vue如何使用自定義插槽Slot
Vue 中使用 slot 的方式取決于你是使用 Vue 2 還是 Vue 3，因為這兩個版本在插槽（Slot）的語法上有所不同。
下面是兩個版本的基本使用方法：
1. vue2 如何使用slot
在 Vue 2 中，slot 是用來實現組件內容分發的一個關鍵特性，它允許你在父組件中定義一塊內容，然后在子組件中決定如何展示這塊內容。
Vue 2 提供了幾種類型的 slots，包括默認插槽、具名插槽以及作用域插槽。
以下是它們的基本使用方法：
1.1. 默認插槽（Default Slot）
默認插槽是最基本的用法，當你在一個組件中沒有明確指定插槽名稱時，內容將會被分配到默認插槽。
父組件使用：
<template>
<child-component>
<h1>我是父組件傳遞給子組件的內容</h1>
</child-component>
</template>子組件定義：
<template>
<div class="child-component">
<!-- 默認插槽內容將在這里被渲染 -->
<slot></slot>
</div>
</template>1.2. 具名插槽（Named Slot）
具名插槽允許你有選擇地插入內容到子組件的不同區域。
父組件使用：
<template>
<child-component>
<template v-slot:header>
<h1>我是頭部內容</h1>
</template>
<template v-slot:body>
<p>我是主體內容</p>
</template>
</child-component>
</template>子組件定義：
<template>
<div class="child-component">
<div class="header">
<slot name="header"></slot>
</div>
<div class="body">
<slot name="body"></slot>
</div>
</div>
</template>1.3. 作用域插槽（Scoped Slot）
作用域插槽允許子組件向插槽傳遞數據。在 Vue 2 中，你可以使用 slot-scope 特性來接收這些數據。
父組件使用：
<template>
<child-component>
<template v-slot:default="{ item }">
<span>{{ item.text }}</span>
</template>
</child-component>
</template>子組件定義：
<template>
<div class="child-component">
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
};
}
};
</script>請注意，從 Vue 2.6 開始，你可以使用簡寫的 v-slot 替換 slot-scope，使得代碼更簡潔：
使用 v-slot 的簡化寫法：
<!-- 父組件 -->
<template>
<child-component>
<template v-slot:default="slotProps">
<span>{{ slotProps.item.text }}</span>
</template>
</child-component>
</template>以上就是 Vue 2 中使用 slot 的基本方法。
更多詳細內容，請微信搜索“前端愛好者“， ? 戳我 查看 。
2. vue3 如何使用slot
Vue 3 對插槽的使用進行了簡化，并推薦使用新的 v-slot 語法，即使對于默認插槽也是如此。
Vue 3 中對插槽（Slots）的使用進行了改進，使其更加靈活和直觀。
以下是在 Vue 3 中使用插槽的基本方法：
2.1. 默認插槽（Default Slot）
默認插槽的使用方式與Vue 2相似，但語法稍有不同。
Vue 3 中不再需要顯式地使用 <slot> 標簽，除非你需要配置特定的行為。
父組件使用：
<template>
<ChildComponent>
<h1>我是父組件傳遞給子組件的內容</h1>
</ChildComponent>
</template>子組件定義：
<template>
<div class="child-component">
<!-- 默認情況下，這里會自動渲染傳遞給組件的內容 -->
<!-- 顯式使用 <slot> 只是為了在需要時進行更復雜的設置 -->
</div>
</template>2.2. 具名插槽（Named Slot）
具名插槽的使用也保持了類似的邏輯，但現在使用 v-slot 指令更為簡潔。
父組件使用：
<template>
<ChildComponent>
<template v-slot:header>
<h1>我是頭部內容</h1>
</template>
<template v-slot:body>
<p>我是主體內容</p>
</template>
</ChildComponent>
</template>子組件定義：
<template>
<div class="child-component">
<div class="header">
<slot name="header"></slot>
</div>
<div class="body">
<slot name="body"></slot>
</div>
</div>
</template>2.3. 作用域插槽（Scoped Slot）
Vue 3 引入了新的 v-slot 語法，它不僅更簡潔，還直接支持作用域插槽的傳遞。現在你可以直接在 v-slot 中解構來自子組件的數據。
父組件使用：
<template>
<ChildComponent>
<template v-slot:default="{ item }">
<span>{{ item.text }}</span>
</template>
</ChildComponent>
</template>子組件定義：
<template>
<div class="child-component">
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]);
</script>2.4. 動態插槽名稱
Vue 3 還支持動態插槽名稱，通過將 v-slot 綁定到一個變量即可實現。
<template>
<ChildComponent>
<template v-for="(content, name) in slotsContent" :v-slot:[name]>
{{ content }}
</template>
</ChildComponent>
</template>Vue 3 中插槽的改進旨在簡化API并提高可讀性，同時保持了Vue組件間內容復用的強大能力。
Vue 3 中 v-slot 語法是標準用法，即使對于默認插槽也是如此，盡管默認插槽在子組件中可能不需要顯式的 <slot> 標簽。
此外，Vue 3 引入了Composition API，這會影響子組件內部狀態管理的方式，但對插槽的使用影響不大。
