插槽与内容分发

默认插槽     父组件决定"插入什么内容"（位置唯一）
具名插槽     父组件决定"哪些内容放进哪些位置"（多出口）
作用域插槽   子组件把内部数据交给父组件渲染（数据在子、渲染权在父）

<!-- BaseCard.vue：骨架归组件，内容归使用方 -->
<template>
  <div class="card">
    <slot>
      <!-- 后备内容（fallback）：使用方没给内容时显示 -->
      <p class="empty">暂无内容</p>
    </slot>
  </div>
</template>

<!-- 使用方 -->
<BaseCard>
  <p>这是被插入到 slot 位置的内容</p>
</BaseCard>

<BaseCard />          <!-- 显示"暂无内容" -->

<!-- PageShell.vue -->
<template>
  <div class="page">
    <header class="page-header">
      <slot name="header">默认头部</slot>   <!-- 每个出口都可以有后备内容 -->
    </header>
    <main>
      <slot />                            <!-- 没写 name 的内容默认进这里（default） -->
    </main>
    <footer>
      <slot name="footer">默认底部</slot>
    </footer>
  </div>
</template>

<!-- 使用方：template + #名字 指定去向 -->
<PageShell>
  <template #header>
    <h2>自定义头部</h2>
  </template>

  <p>没有包裹 template 的内容默认进 default 插槽</p>

  <template #footer>
    <p>自定义底部</p>
  </template>
</PageShell>

<!-- DataList.vue -->
<script setup lang="ts">
import { ref } from 'vue'

interface Item { id: number; name: string; online: boolean }
const items = ref<Item[]>([
  { id: 1, name: '项目 1', online: true },
  { id: 2, name: '项目 2', online: false },
  { id: 3, name: '项目 3', online: true },
])
</script>

<template>
  <ul class="data-list">
    <li v-for="item in items" :key="item.id">
      <!-- 把 item 传给插槽：这就是"作用域"插槽 -->
      <slot name="item" :item="item">
        {{ item.name }}      <!-- 后备渲染：使用方懒得自定义时兜底 -->
      </slot>
    </li>
  </ul>
</template>

<!-- 使用方：解构拿数据，自定义渲染 -->
<DataList>
  <template #item="{ item }">
    <strong>{{ item.id }}: {{ item.name }}</strong>
    <span :class="item.online ? 'on' : 'off'">
      {{ item.online ? '在线' : '离线' }}
    </span>
  </template>
</DataList>

<template>
  <!-- 插槽名来自变量：按配置切换布局的编辑器类组件会用 -->
  <PageShell>
    <template #[section]>动态内容</template>
  </PageShell>

  <!-- $slots：程序化检查使用方传了哪些插槽 -->
  <footer v-if="$slots.footer">
    <slot name="footer" />
  </footer>
</template>

<script setup lang="ts">
import { useSlots } from 'vue'
const slots = useSlots()
// 组合式 API 里等价访问：slots.header?.() —— 插槽本质是返回 vnode 的函数
</script>

const slots = defineSlots<{
  default(props: { item: Item; index: number }): unknown
  header?(props: { title: string }): unknown
  footer?(): unknown
}>()

<!-- ChildScope.vue -->
<script setup lang="ts">
const secret = ref('子组件内部状态')
</script>
<template>
  <slot :item="secret">
    <!-- 这里能访问 secret（子作用域） -->
  </slot>
</template>

<!-- 父组件 -->
<ChildScope>
  {{ secret }}      <!-- ReferenceError：secret 不存在！ -->
</ChildScope>

<!-- FetchData.vue：只负责取数与状态管理 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{ url: string }>()
const data = ref<unknown>(null)
const loading = ref(false)
const error = ref<Error | null>(null)

onMounted(async () => {
  loading.value = true
  try {
    data.value = await fetch(props.url).then(r => r.json())
  } catch (e) {
    error.value = e as Error
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <slot :data="data" :loading="loading" :error="error" />
</template>

<!-- 使用方：同一逻辑，两种完全不同的长相 -->
<FetchData url="/api/singers">
  <template #default="{ data, loading, error }">
    <p v-if="loading">加载中...</p>
    <p v-else-if="error">出错了：{{ error.message }}</p>
    <ul v-else>
      <li v-for="s in data" :key="s.id">{{ s.name }}</li>
    </ul>
  </template>
</FetchData>