Vue中插槽Slot的多种高级玩法详解

 <!-- 子组件 -->
  <template>
    <div class="card">
      <div class="card-title">通用卡片标题</div>
      <div class="card-content">
        <slot> 这里是默认的填充文本 </slot>
      </div>
    </div>
  </template>

 <!-- 父组件 -->
  <template>
    <div class="app">
      <MyCard> 这是我传递给卡片的具体内容。 </MyCard>
    </div>
  </template>

 <!-- 子组件:LayoutComponent.vue -->
<template>
  <div class="layout">
    <header class="header">
      <slot name="header"></slot>
    </header>
    
    <main class="content">
      <slot></slot> 
    </main>
    
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
 <!-- Vue 3 Composition API 模式下，逻辑部分可以保持简洁 -->
</script>

 <!-- 父组件使用示例 -->
<template>
  <LayoutComponent>
    <template #header>
      <h1>页面标题</h1>
      <nav>导航菜单</nav>
    </template>
    
    <p>这是主体内容，将填充到默认插槽中...</p>
    
    <template #footer>
      <p>版权信息 &copy; 2026</p>
    </template>
  </LayoutComponent>
</template>

<script setup lang="ts">
import LayoutComponent from './LayoutComponent.vue';
</script>

 <!-- 子组件：`UserList.vue` -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user" :index="user.id">
        {{ user.name }}
      </slot>
    </li>
  </ul>
</template>

<script setup lang="ts">
interface User {
  id: number;
  name: string;
  role: string;
}

const users: User[] = [
  { id: 1, name: '张三', role: '管理员' },
  { id: 2, name: '李四', role: '开发者' }
];
</script>

 <!-- 父组件使用示例 -->
<template>
  <UserList>
    <template #default="{ user }">
      <span :style="{ color: user.role === '管理员' ? 'red' : 'blue' }">
        {{ user.name }} - 【{{ user.role }}】
      </span>
    </template>
  </UserList>
</template>

<slot>这是如果没有内容时显示的默认文本</slot>