Vue 3 插槽组合实战：用作用域插槽与具名插槽搭出可复用布局组件

插槽解决的是“布局归父、内容归子”的复用

当多个页面共用同一套卡片外壳，但内部标题、操作区、主体各不相同，最干净的做法不是 props 传对象，而是把可变部分交给插槽。Vue 3 的具名插槽管“位置”，作用域插槽管“数据回流”。

具名插槽：把组件拆成多个插入点

<!-- Card.vue -->
<template>
  <section class="card">
    <header class="card__head">
      <slot name="title">默认标题</slot>
      <slot name="actions" />
    </header>
    <div class="card__body">
      <slot />
    </div>
  </section>
</template>

<!-- 使用方 -->
<Card>
  <template #title>订单详情</template>
  <template #actions>
    <button @click="exportPdf">导出</button>
  </template>
  <p>这里是卡片主体内容。</p>
</Card>

作用域插槽：把子组件数据回传给父组件渲染

当列表项怎么渲染由父组件决定、但数据在子组件里时，作用域插槽把数据“带出来”。

<!-- List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="row" :item="item" :index="$index">
        {{ item.name }}
      </slot>
    </li>
  </ul>
</template>

<script setup>
defineProps({ items: { type: Array, required: true } });
</script>

<List :items="orders">
  <template #row="{ item, index }">
    <span>#{{ index + 1 }}</span>
    <strong>{{ item.no }}</strong>
    <em v-if="item.paid">已支付</em>
  </template>
</List>

工程建议

• 默认插槽负责主体，具名插槽负责固定位置（标题、操作区、页脚），职责清晰。
• 作用域插槽的解构变量来自子组件，父组件拿到的是响应式数据，重渲染由 Vue 自动追踪。
• 复杂组件优先用插槽而非“props 传渲染函数”，模板可读性更好，devtools 也能展开插槽内容。