v-slot (#) 插槽内容指令
最后更新:2026-10-22
v-slot (#) 插槽内容指令
v-slot 指定插槽内容,简写为 #:用于将模板片段传给子组件的具名插槽或作用域插槽。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<template v-slot:header>...</template>
<template #default="{ item }">...</template>
<Child v-slot="{ data }">
⚙️ 参数
| expression | 插槽名(省略为默认插槽);作用域插槽可解构子组件传来的数据 |
|---|
返回值:指令,无返回值
▶ 示例
修改下面的代码,在预览区实时查看效果:
输出:
页面显示加粗的「自定义标题」——父组件内容替换了插槽默认值。
💡 要点
💡 提示 # 是 v-slot: 的简写,#header 等价于 v-slot:header。
⚠️ 注意 v-slot 只能用在 或组件标签上,不能放在普通元素上。
ℹ️ 说明 作用域插槽让父组件拿到子组件的数据(#default="{ item }"),是列表组件定制的核心机制。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q # 和 v-slot: 一样吗?
A 完全等价,# 是官方简写;v-slot 不加参数时代表默认插槽。
Q 什么是作用域插槽?
A 子组件通过 slot 标签传数据给父组件的内容片段(如 #default="{ item }"),是列表组件定制的核心。
Q v-slot 能放在普通元素上吗?
A 不能,只能用在 <template> 或组件标签上,这是最常见的报错来源。