Vue 插槽（Slot）完全指南

插槽是 Vue 中组件内容分发的机制，让父组件可以向子组件传递 HTML 内容。

一、为什么需要插槽？

<!-- 子组件 Card.vue --> <div class="card"> <div class="header">标题</div> <div class="body">内容</div> </div> <!-- 父组件使用 --> <Card /> <!-- 只能显示固定的内容，不够灵活 -->

插槽的作用：让父组件可以自定义子组件内部的内容。

二、三种插槽类型

三、默认插槽（Default Slot）

父组件使用

<Child> <p>这是父组件传入的内容</p> </Child>

子组件定义

<!-- Child.vue --> <div class="card"> <div class="header">卡片标题</div> <div class="body"> <!-- 默认插槽：父组件传入的内容会显示在这里 --> <slot></slot> </div> </div>

渲染结果

<div class="card"> <div class="header">卡片标题</div> <div class="body"> <p>这是父组件传入的内容</p> </div> </div>

默认内容（后备内容）

<!-- 子组件：提供默认内容 --> <slot>默认显示的内容</slot>

<!-- 父组件：不传内容时显示默认 --> <Child /> <!-- 显示"默认显示的内容" --> <Child>自定义内容</Child> <!-- 显示"自定义内容" -->

四、具名插槽（Named Slot）

当子组件有多个不同位置需要填充时，使用具名插槽。

父组件使用（Vue 3 语法）

<Card> <template #header> <h2>自定义头部</h2> </template> <template #default> <p>自定义主体内容</p> </template> <template #footer> <button>确认</button> <button>取消</button> </template> </Card>

子组件定义

<!-- Card.vue --> <div class="card"> <div class="header"> <slot name="header">默认头部</slot> </div> <div class="body"> <slot>默认内容</slot> </div> <div class="footer"> <slot name="footer">默认底部</slot> </div> </div>

简写对照

五、作用域插槽（Scoped Slot）

作用域插槽让子组件可以向父组件传递数据，父组件根据这些数据决定如何渲染。

父组件使用

<Table :data="userList"> <!-- 接收子组件传递的数据 --> <template #row="{ rowData, index }"> <div class="custom-row"> <span class="index">{{ index + 1 }}</span> <span class="name">{{ rowData.name }}</span> <span class="age">{{ rowData.age }}岁</span> </div> </template> </Table>

子组件定义

<!-- Table.vue --> <template> <div class="table"> <div v-for="item in data" :key="item.id" class="row"> <!-- 把 item 传递给父组件 --> <slot name="row" :rowData="item" :index="index"> <!-- 默认显示方式 --> {{ item.name }} </slot> </div> </div> </template> <script setup> const props = defineProps(['data']) const data = props.data </script>