Vue-slot 插槽

一、前言

在 Vue 的组件化开发中，我们常常需要将一些通用的 UI 结构封装成可复用的组件。然而，不同使用场景下，这些组件内部可能需要展示不同的内容。这时，我们就需要用到 Vue 提供的一个非常强大的特性 —— 插槽（slot）。

通过本文，你将掌握：

• 插槽的基本概念与作用；
• 默认插槽、具名插槽、作用域插槽的区别；
• 如何在组件中定义和使用插槽；
• 实际开发中的典型使用场景；
• 插槽使用的最佳实践；

二、什么是插槽？

插槽（slot） 是 Vue 组件中用于接收外部传入 HTML 内容的一种机制。你可以把它理解为一个“预留位置”，允许父组件向子组件插入任意内容，从而实现更灵活的组件复用。

📌 插槽的本质是 Vue 提供的一种内容分发机制。

三、默认插槽（Default Slot）

✅ 示例：定义一个卡片组件 Card.vue

<!-- Card.vue -->
<template>
  <div class="card">
    <div class="card-header">标题</div>
    <div class="card-body">
      <!-- 默认插槽 -->
      <slot>默认内容</slot>
    </div>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
.card-header {
  font-weight: bold;
}
</style>

✅ 使用组件时传递内容

<!-- HomeView.vue -->
<template>
  <Card>
    <p>这是卡片的内容区域</p>
  </Card>
</template>

📌 效果：

• <slot> 被 <p>这是卡片的内容区域</p> 替换；
• 如果没有传入内容，则显示“默认内容”。

四、具名插槽（Named Slot）

当组件中有多个需要插入内容的位置时，我们可以使用 具名插槽。

✅ 示例：定义一个布局组件 Layout.vue

<!-- Layout.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

✅ 使用组件并传入多个插槽内容

<!-- App.vue -->
<template>
  <Layout>
    <template #header>
      <h1>页面头部</h1>
    </template>

    <p>这是主要内容区域</p>

    <template #footer>
      <p>页面底部信息</p>
    </template>
  </Layout>
</template>

📌 注意：

• #header 是 v-slot:header 的缩写；
• 没有指定 name 的 <slot> 是默认插槽；
• 插槽内容可以是任意 HTML 或组件。

五、作用域插槽（Scoped Slot）

有时候我们希望插槽内容能够访问到子组件的数据，这就需要用到 作用域插槽（Scoped Slot）。

✅ 示例：定义一个列表组件 UserList.vue

<!-- UserList.vue -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <!-- 将 user 数据暴露给插槽 -->
      <slot :user="user"></slot>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const users = ref([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
])
</script>

✅ 使用组件并自定义渲染逻辑

<!-- App.vue -->
<template>
  <UserList v-slot="{ user }">
    <span>姓名：{{ user.name }} - 年龄：{{ user.age }}</span>
  </UserList>
</template>

📌 说明：

• 子组件通过 :user="user" 向外传递数据；
• 父组件通过 v-slot="{ user }" 接收数据；
• 这种方式非常适合动态列表或表格组件的定制化渲染。

六、插槽的实际应用场景

七、插槽的高级技巧

✅ 动态插槽名（Vue 3 支持）

<template>
  <Component>
    <template #[dynamicSlotName]>
      动态插槽内容
    </template>
  </Component>
</template>

✅ 插槽回退内容（Fallback Content）

<slot>默认内容</slot>

如果没有提供插槽内容，就显示默认内容。

✅ 插槽类型判断（Vue 3 Composition API）

import { h, useSlots } from 'vue'

export default {
  setup() {
    const slots = useSlots()

    if (slots.default) {
      console.log('存在默认插槽')
    }
  }
}

八、使用插槽的最佳实践

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！