Vue2 插槽详解

<!-- 子组件 -->
<div class="container">
  <slot>默认内容</slot>
</div>

<!-- 父组件 -->
<my-component>
  <p>插槽内容</p>
</my-component>

<!-- 子组件 -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<!-- 父组件 -->
<base-layout>
  <template v-slot:header>
    <h1>标题</h1>
  </template>

  <p>主要内容</p>

  <template v-slot:footer>
    <p>底部信息</p>
  </template>
</base-layout>

<!-- 缩写 -->
<base-layout>
  <template #header>
    <h1>标题</h1>
  </template>
</base-layout>

<!-- 子组件 -->
<ul>
  <li v-for="item in items" :key="item.id">
    <slot :item="item" :index="index"></slot>
  </li>
</ul>

<!-- 父组件 -->
<my-list :items="items">
  <template v-slot:default="slotProps">
    <span>{{ slotProps.item.name }}</span>
  </template>
</my-list>

<!-- 解构插槽 Prop -->
<my-list :items="items">
  <template v-slot:default="{ item, index }">
    <span>{{ item.name }}</span>
  </template>
</my-list>

<base-layout>
  <template v-slot:[dynamicSlotName]>
    动态插槽内容
  </template>
</base-layout>

<!-- ListComponent.vue -->
<template>
  <ul class="list">
    <li v-for="item in items" :key="item.id" class="list-item">
      <slot :item="item">
        {{ item.name }}
      </slot>
    </li>
  </ul>
</template>

<!-- 使用 -->
<list-component :items="users">
  <template #default="{ item }">
    <div class="user-card">
      <img :src="item.avatar" />
      <span>{{ item.name }}</span>
    </div>
  </template>
</list-component>

<!-- TableComponent.vue -->
<template>
  <table>
    <thead>
      <slot name="header"></slot>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <slot :row="row"></slot>
      </tr>
    </tbody>
  </table>
</template>

<!-- 使用 -->
<table-component :data="tableData">
  <template #header>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </template>
  <template #default="{ row }">
    <td>{{ row.name }}</td>
    <td>{{ row.age }}</td>
  </template>
</table-component>