Vue插槽v-slot语法糖使用方法

Vue 3 中的 `v-slot` 语法糖（即用 `#` 替代 `v-slot:`）看似简洁，实则暗藏严格限制：它仅适用于具名插槽且插槽名必须是合法 JavaScript 标识符（如 `header`、`footer`），禁用短横线、数字开头、空格或特殊符号；动态插槽名、默认插槽和作用域插槽解构均不可缩写，否则将引发错误或违背官方规范。本文直击常见误用陷阱，详解何时能安全用 `#`、何时必须回归完整 `v-slot:` 写法，并给出清晰的默认插槽最佳实践与真实组件组合示例，助你写出既简洁又健壮、符合 Vue 官方推荐的插槽代码。

Vue 中 v-slot 的语法糖就是用 # 符号代替 v-slot:，但必须严格满足两个前提：只用于具名插槽、且插槽名是合法的标识符（不能含空格、特殊符号或数字开头）。

哪些情况能安全缩写为 #

只要子组件定义了带 name 的插槽，父组件中就可以用 #xxx 替代 v-slot:xxx：

• →
• →
• →

注意：# 后面直接跟插槽名，**不加引号**，也不加括号。比如 #user-info 是非法的（含短横线），#1st 也不行（数字开头）。

哪些情况不能缩写

以下情形必须写完整 v-slot: 形式，不可用 #：

• 动态插槽名，例如 v-slot:[dynamicName] —— 这里必须保留方括号语法，#[dynamicName] 不合法
• 默认插槽（无 name）—— v-slot:default 可以写，但不能简写成 #default 或 #；更常见的是直接省略指令，用匿名模板或裸内容
• 作用域插槽传递参数时，如 v-slot="{ item }" —— 这属于解构写法，和 # 无关，不能缩写

默认插槽怎么写才规范

默认插槽本身没有名字，所以它天然不参与 # 缩写体系。推荐两种写法：

• 最简洁：直接把内容写在组件标签内（不包