<template>
    <div class="card">
        <slot>默認(rèn)內(nèi)容</slot>
    </div>
</template>
<script setup>
// 使用 script setup，不需要顯式的導(dǎo)出語(yǔ)句
</script>
<style scoped>
.card {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>

<template>
    <!-- 使用默認(rèn)內(nèi)容 -->
    <UnnamedSlotCard />
    <!-- 自定義內(nèi)容 -->
    <UnnamedSlotCard>
        <div>這是自定義的內(nèi)容</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(['動(dòng)態(tài)項(xiàng)1', '動(dòng)態(tài)項(xiàng)2', '動(dòng)態(tài)項(xiàng)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. 最簡(jiǎn)單的形式
defineProps(['items'])
// 2. 帶類型驗(yàn)證的形式
defineProps({
    items: Array
})
// 3. 完整的驗(yàn)證配置
defineProps({
    items: {
        type: Array,
        required: true,
        default: () => [],
        validator(value) {
            return value.length > 0
        }
    }
})

defineProps({
    propA: String,      // 字符串
    propB: Number,      // 數(shù)字
    propC: Boolean,     // 布爾值
    propD: Array,       // 數(shù)組
    propE: Object,      // 對(duì)象
    propF: Function,    // 函數(shù)
    propG: Date,        // 日期
    propH: Symbol       // Symbol
})

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