v-slot 是 Vue 3 统一推荐的插槽语法，取代 Vue 2 的 slot/slot-scope，支持默认、具名、作用域插槽及后备内容；必须用在 上，具名可简写为 #xxx，作用域插槽通过解构接收子组件传递的数据。

v-slot 是 Vue 3 中统一且推荐的插槽语法，用于在父组件中向子组件传递结构化内容。它取代了 Vue 2 中的 slot 和 slot-scope 属性，更清晰、更安全，也更符合指令命名规范。

默认插槽用法

当子组件只定义了一个无名 时，父组件可直接在组件标签内写内容，或显式使用 v-slot:default（等价于 v-slot）包裹：

• 简写形式（最常用）：

  主内容

  

  Element Plus UI Vue3

  Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

  下载
• 完整写法：
• 注意：v-slot 只能用在 上，不能直接写在普通 HTML 标签或组件上（除非是带作用域的场景）

具名插槽精准投递

子组件通过 定义多个插槽区域，父组件用 v-slot:xxx 或简写 #xxx 指定内容归属：

• 多个具名插槽可并列写在同一个父组件模板中，顺序不影响渲染位置
• 未匹配的具名内容不会被渲染，也不会 fallback 到默认插槽（除非显式留空）

作用域插槽传子组件数据

当子组件需要把内部数据“暴露”给父组件定制内容时，用带参数的 v-slot：

• 子组件中：
• 父组件中：
• 解构参数支持重命名、默认值、甚至嵌套对象解构：v-slot:item="{ user: u, index: i = 0 }"
• 作用域插槽本质是函数调用：子组件把数据作为参数传入，父组件决定怎么渲染

后备内容与空插槽处理

插槽本身可内置默认文案，当父组件未提供对应内容时自动显示：

• 子组件中：暂无内容 或 默认标题
• 后备内容只在父组件完全没传该插槽内容时生效；哪怕传了个空 ，也会覆盖默认文案
• 想兼顾“有内容”和“无内容”逻辑，可在作用域插槽中判断参数是否为真值

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