Vue3 插槽Slot指南及使用举例

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

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

<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>

<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>

// 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
})

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