Vue基础教程（124）组件和组合API之命名插槽：相亲角还是代码角？Vue命名插槽让你告别“单身”组件！

还记得上次相亲时，对方递给你一张填写“理想型”的表格吗？在Vue的世界里，组件就像一场精心安排的相亲，而命名插槽就是那张让你自由定义理想伴侣的表格。别再让你的组件将就着接受默认内容了，今天我们就来聊聊如何用命名插槽为组件征婚！

---

一、初识命名插槽：为什么你的组件总在“将就”？

刚开始学Vue时，我总想着把一个按钮组件用到所有地方，结果不是颜色不对就是图标缺失。后来才发现，这就像想用同一套话术追到所有相亲对象——注定失败！

普通插槽的局限性：

<!-- 按钮组件 -->
<template>
  <button class="btn">
    <slot></slot> <!-- 这里只能塞一个内容 -->
  </button>
</template>
<!-- 使用 -->
<MyButton>
  点击我 <!-- 只能传文本，想加图标？没门！ -->
</MyButton>

看到问题了吗？这个按钮组件像个一居室，所有东西都得挤在同一个房间里！

命名插槽闪亮登场：

<!-- 升级版按钮组件 -->
<template>
  <button class="fancy-btn">
    <slot name="icon"></slot>  <!-- 图标专属位置 -->
    <slot name="text"></slot>  <!-- 文本专属位置 -->
    <slot name="badge"></slot> <!-- 角标专属位置 -->
  </button>
</template>

现在这个组件变成了三室一厅！每个房间都有明确用途，想怎么装修就怎么装修。

二、命名插槽基础：给你的内容分“房间”

2.1 基础语法（Vue 2 & 3通用）

定义命名插槽：

<!-- ProfileCard.vue -->
<template>
  <div class="profile-card">
    <header>
      <slot name="header"></slot>
    </header>
    
    <main>
      <slot name="body"></slot>
    </main>
    
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

使用命名插槽：

<template>
  <ProfileCard>
    <template v-slot:header>
      <h2>相亲资料卡</h2>
      <img src="./crown.png" alt VIP>
    </template>
    
    <template v-slot:body>
      <p>年龄：28 | 身高：180cm</p>
      <p>爱好：写代码、debug、教人写代码</p>
    </template>
    
    <template v-slot:footer>
      <button>联系TA</button>
      <button>送礼物</button>
    </template>
  </ProfileCard>
</template>

看！现在header、body、footer各司其职，再也不会出现头像跑到脚底下的尴尬情况了。

2.2 语法糖时间：#符号的妙用

写v-slot:太麻烦？试试#符号，就像给微信聊天设置快捷键：

<!-- 长篇大论版 -->
<template v-slot:header>...</template>
<!-- 简洁版 -->
<template #header>...</template>
<!-- 默认插槽的简洁写法 -->
<template #default>...</template>

三、实战：打造你的专属“相亲资料卡”

来点实际的！假设我们在开发一个相亲网站，需要展示用户资料：

<!-- UserProfile.vue -->
<template>
  <div class="user-profile">
    <div class="avatar-section">
      <slot name="avatar">
        <img src="./default-avatar.png" alt="默认头像"> <!-- 默认内容 -->
      </slot>
    </div>
    
    <div class="basic-info">
      <slot name="name"></slot>
      <slot name="age"></slot>
      <slot name="tags"></slot>
    </div>
    
    <div class="action-area">
      <slot name="actions"></slot>
    </div>
    
    <!-- 匿名告白区：不指定name的默认插槽 -->
    <slot>这个人很懒，什么都没写...</slot>
  </div>
</template>

使用这个组件时，我们可以像搭积木一样自由组合：

<template>
  <UserProfile>
    <!-- 自定义头像 -->
    <template #avatar>
      <img src="./vip-avatar.png" alt="VIP头像">
      <span class="vip-badge">钻石会员</span>
    </template>
    
    <!-- 基本信息 -->
    <template #name>
      <h2>程序员小张 <img src="./verified.png" alt="已认证"></h2>
    </template>
    
    <template #age>
      <p>🌍 28岁 · 北京 · 175cm</p>
    </template>
    
    <template #tags>
      <div class="tags">
        <span>有房</span>
        <span>有车</span>
        <span>代码健壮</span>
      </div>
    </template>
    
    <!-- 操作按钮 -->
    <template #actions>
      <button class="like-btn">❤️ 喜欢</button>
      <button class="chat-btn">💬 聊天</button>
      <button class="super-like">🌟 超级喜欢</button>
    </template>
    
    <!-- 默认插槽内容 -->
    <p>💻 全栈工程师，擅长Vue、React</p>
    <p>🎵 爱好：写代码时听周杰伦</p>
  </UserProfile>
</template>

这样的组件就像乐高积木，每个部分都可以按需定制，再也不用为了改个小地方而重写整个组件了！

四、组合API + 命名插槽：动态插槽的威力

Vue 3的组合API让命名插槽变得更加灵活，就像给你的组件装上了人工智能！

4.1 动态插槽名：让内容“随机应变”

<!-- DynamicLayout.vue -->
<template>
  <div class="dynamic-layout">
    <div 
      v-for="slot in slotConfigs" 
      :key="slot.name"
      :class="slot.class"
    >
      <slot :name="slot.name"></slot>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

// 动态配置插槽
const slotConfigs = ref([
  { name: 'banner', class: 'banner-section' },
  { name: 'featured', class: 'featured-section' },
  { name: 'sidebar', class: 'sidebar-section' }
])
</script>

使用的时候可以动态决定显示什么：

<template>
  <DynamicLayout>
    <template #[currentSlotName]>
      <div>根据当前状态动态显示的内容</div>
    </template>
    
    <template #banner>
      <HeroBanner />
    </template>
  </DynamicLayout>
</template>
<script setup>
import { ref, computed } from 'vue'

const currentTab = ref('featured')
const currentSlotName = computed(() => {
  return currentTab.value === 'home' ? 'banner' : 'featured'
})
</script>

4.2 组合API中的插槽操作

在组合API中，你可以通过useSlots()来操作插槽：

<!-- GameCharacter.vue -->
<template>
  <div class="character">
    <!-- 装备栏 -->
    <div class="equipment-slots">
      <div 
        v-for="slot in availableSlots" 
        :key="slot"
        class="equipment-slot"
      >
        <slot :name="`equipment-${slot}`"></slot>
      </div>
    </div>
    
    <!-- 技能栏 -->
    <div class="skill-slots">
      <slot name="skills"></slot>
    </div>
  </div>
</template>
<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 动态检测哪些装备插槽被使用了
const availableSlots = ['weapon', 'armor', 'accessory']

const equippedSlots = computed(() => {
  return availableSlots.filter(slot => 
    slots[`equipment-${slot}`]
  )
})

// 在控制台显示当前装备情况
console.log(`已装备部位：${equippedSlots.value.join(', ')}`)
</script>

五、作用域插槽：组件内部的“隐私泄露”

有时候，组件内部的数据需要“泄露”给插槽使用，这就是作用域插槽的用武之地。

5.1 基础作用域插槽

<!-- DataTable.vue -->
<template>
  <div class="data-table">
    <div 
      v-for="(item, index) in data" 
      :key="item.id"
      class="table-row"
    >
      <slot name="row" :item="item" :index="index"></slot>
    </div>
  </div>
</template>
<script setup>
defineProps({
  data: {
    type: Array,
    required: true
  }
})
</script>

使用这个表格组件时，我们可以访问每一行的数据：

<template>
  <DataTable :data="userList">
    <template #row="{ item, index }">
      <div class="row" :class="{ even: index % 2 === 0 }">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}岁</span>
        <span :class="`status-${item.status}`">
          {{ item.status === 'single' ? '单身' : '恋爱中' }}
        </span>
        <button @click="showDetail(item)">查看详情</button>
      </div>
    </template>
  </DataTable>
</template>
<script setup>
const userList = [
  { id: 1, name: '小明', age: 28, status: 'single' },
  { id: 2, name: '小红', age: 26, status: 'in_relationship' }
]

const showDetail = (user) => {
  console.log('查看用户详情:', user)
}
</script>

5.2 高级案例：可配置的商品卡片

<!-- ProductCard.vue -->
<template>
  <div class="product-card">
    <slot name="image" :product="product">
      <!-- 默认图片 -->
      <img :src="product.image" :alt="product.name">
    </slot>
    
    <div class="product-info">
      <slot name="title" :product="product">
        <h3>{{ product.name }}</h3>
      </slot>
      
      <slot name="price" :product="product" :formatPrice="formatPrice">
        <p class="price">{{ formatPrice(product.price) }}</p>
      </slot>
      
      <slot name="actions" :product="product" :addToCart="addToCart">
        <button @click="addToCart(product)">加入购物车</button>
      </slot>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  product: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['add-to-cart'])

const formatPrice = (price) => {
  return `¥${price.toFixed(2)}`
}

const addToCart = (product) => {
  emit('add-to-cart', product)
}
</script>

现在可以极其灵活地使用这个组件：

<template>
  <ProductCard 
    :product="currentProduct" 
    @add-to-cart="handleAddToCart"
  >
    <!-- 自定义图片区域 -->
    <template #image="{ product }">
      <div class="image-gallery">
        <img :src="product.mainImage" :alt="product.name">
        <div class="thumbnails">
          <img 
            v-for="(thumb, index) in product.thumbnails" 
            :key="index"
            :src="thumb" 
            @click="switchImage(thumb)"
          >
        </div>
      </div>
    </template>
    
    <!-- 自定义标题 -->
    <template #title="{ product }">
      <div class="title-section">
        <h3>{{ product.name }}</h3>
        <span class="brand">{{ product.brand }}</span>
        <img v-if="product.isGenuine" src="./authentic.png" alt="正品保证">
      </div>
    </template>
    
    <!-- 自定义价格显示 -->
    <template #price="{ product, formatPrice }">
      <div class="price-section">
        <p class="current-price">{{ formatPrice(product.price) }}</p>
        <p class="original-price" v-if="product.originalPrice">
          原价：{{ formatPrice(product.originalPrice) }}
        </p>
        <p class="discount" v-if="product.discount">
          省{{ formatPrice(product.discount) }}
        </p>
      </div>
    </template>
    
    <!-- 自定义操作按钮 -->
    <template #actions="{ product, addToCart }">
      <div class="action-buttons">
        <button class="buy-now" @click="addToCart(product)">
          🛒 立即购买
        </button>
        <button class="wishlist" @click="addToWishlist(product)">
          ❤️ 收藏
        </button>
        <button class="share" @click="shareProduct(product)">
          📤 分享
        </button>
      </div>
    </template>
  </ProductCard>
</template>

六、避坑指南：命名插槽的常见雷区

1. 命名冲突：别给不同的插槽起相同的名字，就像不能给两个孩子起同一个名字
2. 作用域混淆：记住，作用域插槽的数据只在当前插槽内有效
3. 默认内容：总是为重要的插槽提供默认内容，防止页面“开天窗”

<!-- 错误示范 -->
<template>
  <div>
    <slot name="content"></slot> <!-- 如果没提供内容，这里就空了 -->
  </div>
</template>
<!-- 正确示范 -->
<template>
  <div>
    <slot name="content">
      <p>默认内容，防止空白</p> <!-- 友好的后备内容 -->
    </slot>
  </div>
</template>

七、总结

命名插槽就像是给组件开了多个“自定义窗口”，让父组件可以精确地控制每个部分的渲染内容。从基础的单文件组件到组合API中的动态插槽，再到作用域插槽的数据传递，命名插槽为Vue组件化开发提供了极大的灵活性。

记住这个进化过程：

• 普通插槽：一室户，所有东西挤在一起
• 命名插槽：三室一厅，每个房间功能明确
• 作用域插槽：精装修，还能根据业主需求调整

现在就去给你的组件们安排一场完美的“相亲”吧！让它们通过命名插槽找到最合适的内容伴侣，从此告别将就的“单身”生活！