Vue插槽高级用法核心在于作用域隔离与作用域插槽：插槽内容始终在父组件作用域编译，子组件数据需通过<slot :prop="value">显式暴露；作用域插槽是实现无渲染组件的基础，使逻辑（状态、方法）与UI彻底解耦，提升复用性与可测性。
Vue插槽的高级用法，核心在于两个关键点：一是搞清内容在谁的作用域里编译，二是用作用域插槽把逻辑和UI彻底分开。这两者不是并列技巧，而是层层递进的设计逻辑——先理解作用域，才能安全地设计无渲染组件。
插槽内容始终属于父组件作用域
父组件模板里写的内容，不管嵌套多深，都只认父组件的数据和方法。子组件模板里的表达式，也只认自己内部定义的东西。这就像两个独立房间，门开着可以传东西，但各自管各自的灯开关。
常见误区是以为<slot>里面能直接用子组件的data。其实不能。如果父组件想用子组件的数据，必须通过作用域插槽“主动交出来”。
- 默认插槽中写
{{ user.name }}→ 读的是父组件的user - 子组件模板里写
{{ loading }}→ 读的是子组件自己的loading - 想让父组件用子组件的
loading？得靠<slot :loading="loading"></slot>
作用域插槽是无渲染组件的唯一出口
无渲染组件不写任何DOM标签，template里通常只有一行：<slot :data="data" :loading="loading" :refetch="refetch" />。它不控制样式、不决定结构，只专注维护状态和提供方法。
立即学习“前端免费学习笔记（深入）”；
这种设计让复用变得轻量：同一个数据加载逻辑，可以在按钮里用，在卡片里用，甚至在弹窗里用，UI完全由父组件定。
- 子组件暴露
:error、:submit、:isSubmitting等，父组件按需绑定 - 父组件拿到
data后，可渲染成表格、列表、摘要卡，或仅一个状态徽标 - 不需要props传样式类名，也不需要
$emit来回通信，所有交互收敛在插槽参数里
无渲染组件不是偷懒，而是精准分工
它把“做什么”和“做成什么样”拆开：子组件负责正确性（比如防重复提交、错误重试、缓存策略），父组件负责表现力（比如加图标、设动效、适配暗色模式）。
典型适用场景包括表单控件封装、分页器、下拉搜索、权限校验钩子等——这些逻辑稳定、UI多变的模块。
- 避免为每种UI风格写一个新组件，减少维护成本
- 样式零耦合，不污染全局class，不怕CSS-in-JS冲突
- 测试更聚焦：只需验证状态流转和方法行为，不用断言DOM结构
真正难的不是写<slot>，而是判断哪些该交给父组件，哪些必须自己守住。边界清晰了，组件才立得住。
