Vue3 插槽（Slot）指南

基础插槽

什么是插槽？

插槽（Slot）是 Vue 提供的一个强大的内容分发机制，允许父组件向子组件注入内容。它使得组件更加灵活和可复用。

基础插槽示例

1. 创建一个基础卡片组件 (UnnamedSlotCard.vue):

<template>
    <div class="card">
        <slot>默认内容</slot>
    </div>
</template>
 
<script setup>
// 使用 script setup，不需要显式的导出语句
</script>
 
<style scoped>
.card {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>

2. 在父组件中使用：

<template>
    <!-- 使用默认内容 -->
    <UnnamedSlotCard />
    
    <!-- 自定义内容 -->
    <UnnamedSlotCard>
        <div>这是自定义的内容</div>
    </UnnamedSlotCard>
</template>
 
<script setup>
import UnnamedSlotCard from './components/UnnamedSlotCard.vue'
</script>

作用域插槽

什么是作用域插槽？

作用域插槽允许子组件向父组件传递数据，使得父组件可以根据子组件的数据来定制渲染内容。

作用域插槽示例

1. 创建一个列表组件 (ScopedSlotCard.vue):

<template>
    <ul>
        <li v-for="(item, index) in items" :key="index">
            <slot :item="item" :index="index"></slot>
        </li>
    </ul>
</template>
 
<script setup>
defineProps({
    items: {
        type: Array,
        required: true,
        default: () => []
    }
});
</script>
 
<style scoped>
ul {
    list-style: none;
    padding: 0;
}
 
li {
    padding: 8px;
    margin: 4px 0;
    border-bottom: 1px solid #eee;
}
</style>

2. 在父组件中使用：

<template>
    <!-- 基本使用 -->
    <ScopedSlotCard :items="['item1', 'item2', 'item3']">
        <template #default="{ item, index }">
            <strong>{{ index + 1 }} - {{ item }}</strong>
        </template>
    </ScopedSlotCard>
 
    <!-- 自定义样式示例 -->
    <ScopedSlotCard :items="dynamicItems">
        <template #default="{ item, index }">
            <div class="custom-item">
                <span class="index">{{ index + 1 }}</span>
                <span class="content">{{ item }}</span>
            </div>
        </template>
    </ScopedSlotCard>
</template>
 
<script setup>
import { ref } from 'vue'
import ScopedSlotCard from './components/ScopedSlotCard.vue'
 
const dynamicItems = ref(['动态项1', '动态项2', '动态项3'])
</script>
 
<style scoped>
.custom-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.content {
    flex: 1;
}
</style>

Props 类型验证

在 Vue3 中，Props 的类型验证是一个重要的特性，它可以帮助我们更好地定义组件的接口。

基本语法：

// 1. 最简单的形式
defineProps(['items'])
 
// 2. 带类型验证的形式
defineProps({
    items: Array
})
 
// 3. 完整的验证配置
defineProps({
    items: {
        type: Array,
        required: true,
        default: () => [],
        validator(value) {
            return value.length > 0
        }
    }
})

支持的类型验证：

defineProps({
    propA: String,      // 字符串
    propB: Number,      // 数字
    propC: Boolean,     // 布尔值
    propD: Array,       // 数组
    propE: Object,      // 对象
    propF: Function,    // 函数
    propG: Date,        // 日期
    propH: Symbol       // Symbol
})

最佳实践与注意事项

1. 插槽命名规范

• 使用 kebab-case 命名具名插槽
• 默认插槽使用 #default 或直接使用不带名字的 <template>

2. Props 验证

• 始终为 props 提供类型验证
• 对必要的 props 使用 required: true
• 为可选的 props 提供合理的默认值

3. 性能考虑

• 避免在插槽中使用过于复杂的表达式
• 如果插槽内容需要频繁更新，考虑使用计算属性

4. 代码组织

• 将复杂的插槽内容抽取为单独的组件
• 使用具名插槽来组织多个插槽的情况

5. TypeScript 支持

如果使用 TypeScript，可以这样定义 props：

<script setup lang="ts">
interface Props {
    items: string[]
}
 
defineProps<Props>()
</script>

Vue3 的插槽系统提供了强大的内容分发机制，通过基础插槽、作用域插槽和具名插槽的组合使用，我们可以构建出灵活且可维护的组件。合理使用 Props 类型验证，可以让我们的组件更加健壮和易于维护。

记住以下几点：

1. 使用默认插槽处理简单的内容分发
2. 使用作用域插槽处理需要访问子组件数据的情况
3. 使用具名插槽处理多个插槽的情况
4. 始终为 props 提供适当的类型验证
5. 遵循命名规范和最佳实践

通过这些特性的组合使用，我们可以构建出更加灵活和可维护的 Vue 应用。