作用域插槽是父组件获取子组件内部数据最自然、响应式的方式；子组件通过v-bind显式绑定数据到slot，父组件用v-slot解构接收并直接使用，属声明式单向数据流。

作用域插槽是父组件获取子组件内部数据最自然、响应式的方式。它不是让父组件“读取”子组件实例，而是由子组件主动把需要的数据“带出来”，通过插槽传递给父组件模板使用。

子组件：用 v-bind 绑定数据到 slot

在子组件模板中，找到要分发内容的位置，用 <slot></slot> 标签，并通过 v-bind（或简写 :）把变量传出去。这些变量可以是循环项、索引、状态、方法等。

• 必须显式绑定，比如 <slot :item="user" :index="i" :isactive="user.status === 'online'"></slot>
• 不绑定任何属性的 <slot></slot> 是普通插槽，父组件收不到数据
• 多个数据可一起绑定，最终以一个对象形式传给父组件

父组件：用 v-slot 解构接收并使用

父组件在调用子组件时，用 v-slot（或简写 #default）声明作用域插槽，并解构出所需字段。解构后的变量直接在父组件模板中可用。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 默认插槽写法：<template item index isactive>{{ item.name }}</template>
• 具名插槽写法：<template total>共 {{ total }} 条</template>
• 若只传一个对象，也可写成 v-slot="props"，再用 {{ props.item.name }}
• 不能省略 v-slot 或 #default，直接写在子组件标签内会报错

为什么不用 ref 或事件代替？

ref 只能拿到整个子组件实例，无法精准对应某次渲染中的某个列表项；事件需手动触发、维护 emit 逻辑，耦合重且非响应式。而作用域插槽是声明式设计：

立即学习“前端免费学习笔记（深入）”；

• 一次定义，自动响应数据变化
• 父子模板结构清晰，职责分离
• 支持 v-if、v-for、组件嵌套等完整 Vue 模板能力

常见错误提醒

实际开发中容易踩的坑：

• 子组件写了 <slot></slot> 却没绑定任何 prop → 父组件解构不到数据
• 父组件用了旧写法 slot-scope（Vue 2.6+ 已废弃）→ 控制台警告，建议统一用 v-slot
• 解构字段名和子组件绑定的 key 不一致 → 值为 undefined
• 在 setup() 中使用时，slots 是函数，需调用 slots.default?.() 获取 VNode，但数据传递逻辑不变