vue中#是v-slot:xxx的缩写语法糖，用于简化具名插槽写法，如#header等价于v-slot:header；子组件用声明，父组件用或直接#xxx绑定内容，支持解构作用域参数如#item="{ user }"。

Vue 中可以用 # 符号作为 v-slot: 的缩写，专门用于简化具名插槽的模板写法。

什么是具名插槽缩写 #

# 是 v-slot:xxx 的语法糖，只能用在元素或组件的属性上，不能单独使用。它让模板更简洁，尤其在多个具名插槽并存时更易读。

• 写法：#header 等价于 v-slot:header
• 写法：#footer 等价于 v-slot:footer
• 注意：#default 可以简写为 #（仅 Vue 3.2+ 支持），但不推荐混用，建议统一用 #default

如何在子组件中定义具名插槽

子组件需用 <slot name="xxx"></slot> 显式声明具名插槽位置。

<!-- MyCard.vue -->
<div class="card">
  <header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>

父组件中用 # 缩写传入内容

父组件直接用 #xxx 绑定插槽内容，无需再写 v-slot:xxx。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

<mycard><template><h2>卡片标题</h2>
  </template><p></p>
<p>默认插槽内容</p>
<p><template><button>操作按钮</button>
</template></p></mycard>

也可以把 template 标签省略，直接在支持插槽的组件/元素上使用（如 <div>...</div>），但仅限该元素是插槽作用域的直接子节点且无其他内容时有效。

带作用域的具名插槽怎么用 #

当插槽需要接收子组件传递的数据时，可在 #xxx 后加括号解构参数。

• #item="{ data, index }" 等价于 v-slot:item="{ data, index }"
• 常见于列表渲染：<listitem user>{{ user.name }}</listitem>
• 若只取一个属性，可简写为 #item="{ user }" 或 #item="slotProps" 再在内部用 slotProps.user

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！