Vue中插槽Slot的多種高級玩法詳解

更新時間：2026年02月02日 09:18:03 作者：發(fā)現(xiàn)一只大呆瓜

在組件化開發(fā)中,插槽 (Slot) 是實現(xiàn)內(nèi)容分發(fā)的核心機制,這篇文章小編為大家整理了一些Vue插槽Slot的高級玩法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下

前言

在組件化開發(fā)中，插槽 (Slot) 是實現(xiàn)內(nèi)容分發(fā)（Content Distribution）的核心機制。它允許我們將組件的“外殼”與“內(nèi)容”解耦，讓組件具備極高的擴展性。

一、什么是插槽

插槽是子組件提供給父組件的 “占位符” ，用 <slot></slot> 標簽表示。父組件傳遞的任何模板代碼（HTML、組件等）都會替換子組件中的 <slot> 標簽。

二、插槽的三大類型

1. 默認插槽 (Default Slot)

最基礎(chǔ)的插槽，不需要定義 name 屬性。

特點：一個子組件通常只建議使用一個默認插槽。

示例：

 <!-- 子組件 -->
  <template>
    <div class="card">
      <div class="card-title">通用卡片標題</div>
      <div class="card-content">
        <slot> 這里是默認的填充文本 </slot>
      </div>
    </div>
  </template>

 <!-- 父組件 -->
  <template>
    <div class="app">
      <MyCard> 這是我傳遞給卡片的具體內(nèi)容。 </MyCard>
    </div>
  </template>

2. 具名插槽 (Named Slots)

當(dāng)子組件需要多個占位符時，通過 name 屬性來區(qū)分。

語法糖：v-slot:header 可以簡寫為 #header。

示例：

 <!-- 子組件:LayoutComponent.vue -->
<template>
  <div class="layout">
    <header class="header">
      <slot name="header"></slot>
    </header>
    
    <main class="content">
      <slot></slot> 
    </main>
    
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
 <!-- Vue 3 Composition API 模式下，邏輯部分可以保持簡潔 -->
</script>

 <!-- 父組件使用示例 -->
<template>
  <LayoutComponent>
    <template #header>
      <h1>頁面標題</h1>
      <nav>導(dǎo)航菜單</nav>
    </template>
    
    <p>這是主體內(nèi)容，將填充到默認插槽中...</p>
    
    <template #footer>
      <p>版權(quán)信息 &copy; 2026</p>
    </template>
  </LayoutComponent>
</template>

<script setup lang="ts">
import LayoutComponent from './LayoutComponent.vue';
</script>

3. 作用域插槽 (Scoped Slots)

核心價值： “子傳父” 的特殊形式。子組件將內(nèi)部數(shù)據(jù)綁定在 <slot> 上，父組件在填充內(nèi)容時可以接收并使用這些數(shù)據(jù)。

示例：

 <!-- 子組件：`UserList.vue` -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user" :index="user.id">
        {{ user.name }}
      </slot>
    </li>
  </ul>
</template>

<script setup lang="ts">
interface User {
  id: number;
  name: string;
  role: string;
}

const users: User[] = [
  { id: 1, name: '張三', role: '管理員' },
  { id: 2, name: '李四', role: '開發(fā)者' }
];
</script>

 <!-- 父組件使用示例 -->
<template>
  <UserList>
    <template #default="{ user }">
      <span :style="{ color: user.role === '管理員' ? 'red' : 'blue' }">
        {{ user.name }} - 【{{ user.role }}】
      </span>
    </template>
  </UserList>
</template>

三、補充：插槽的默認內(nèi)容

在子組件中，你可以在 <slot> 標簽內(nèi)部放置內(nèi)容。如果父組件沒有提供任何插槽內(nèi)容，則會渲染這些“后備內(nèi)容”；如果提供了，則會被覆蓋。

<slot>這是如果沒有內(nèi)容時顯示的默認文本</slot>

四、總結(jié)：如何選擇插槽？

插槽類型	使用場景
默認插槽	組件只有一個擴展點時使用。
具名插槽	組件有多個固定區(qū)域（如 Header/Main/Footer）需要自定義時使用。
作用域插槽	需要根據(jù)子組件的內(nèi)部數(shù)據(jù)來決定父組件渲染樣式的場景（如列表展示）。

到此這篇關(guān)于Vue中插槽Slot的多種高級玩法詳解的文章就介紹到這了,更多相關(guān)Vue插槽Slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: