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 只能用在