字号: AA A
2026.11.06
25
字号: AA A
一、组件就像快递柜
封装弹窗组件时，样式、遮罩、关闭逻辑都写好了，但内容千变万化——有时是文本，有时是表单，有时是图表。用 Props 传整个 HTML？代码臃肿还丢封装性。
插槽（Slot）就是解决方案：子组件控制结构，父组件决定内容——就像快递柜，子组件搭柜子，父组件塞包裹。
二、编译作用域
核心规则：插槽内容在哪里定义，就只能访问哪里的数据。 父组件插槽里只能访问父组件数据，需要子组件数据时要用"作用域插槽"（后面讲）。
三、默认插槽
没被 template v-slot 包裹的内容自动进入默认插槽。
子组件：
<button><slot></slot></button>
父组件使用：
<Button>提交订单</Button>
后备内容： <slot>提交</slot> —— 不传内容时显示"提交"，传了则覆盖。
四、具名插槽
布局组件有多个位置（头部、主体、侧边栏），用名称精准投递：
子组件：
<header><slot name="header"></slot></header>
<main><slot name="main"></slot></main>
<aside><slot name="sidebar"></slot></aside>
父组件使用：
<BaseLayout>
<template #header><h1>网站标题</h1></template>
<template #main>主体内容</template>
</BaseLayout>
注意：没被 template v-slot 包裹的"游离内容"会进入默认插槽。
五、作用域插槽
子组件主动把数据"递"给父组件——在 slot 上绑定属性，父组件接收 SlotProps。
本质： 作用域插槽就是一个函数。子组件渲染时调用它，把内部数据当参数传进去。
实战：封装列表组件，每项样式由父组件决定。
子组件（FancyList.vue）：
<li v-for="(item, index) in items" :key="item.id">
<slot :item="item" :index="index">
<span>{{ item.name }}</span>
</slot>
</li>
父组件使用：
<FancyList :items="users">
<template #default="{ item, index }">
<div>
<span>{{ index + 1 }}</span>
<img :src="item.avatar" />
<strong>{{ item.name }}</strong>
</div>
</template>
</FancyList>
FancyList 只负责循环和结构，"卡片长什么样"完全交给父组件——这就是控制反转。
无渲染组件： 不渲染 DOM，只处理逻辑（拖拽、分页），通过作用域插槽暴露数据。逻辑与 UI 完美分离。
六、Vue3 改进
• 函数式插槽： 普通和作用域插槽统一编译为函数，支持延迟渲染。
• 静态内容提升： 纯静态内容提升到渲染函数外，不参与 Diff。
• Block 树靶向更新： 通过 patchFlag 直接更新变化块，减少 Diff 开销。
• TypeScript 友好： defineSlots（Vue 3.3+）提供完整类型推导。
七、高级技巧
• 条件插槽： 用 $slots 检测是否传入插槽，决定是否渲染包裹元素。
• 动态插槽名： template #[dynamicSlotName]，插槽名可以是变量。
• 插槽降级： 结合 Fallback 实现优雅兜底——没有 custom 就用 default，再没有显示"暂无内容"。
八、常见坑
• 作用域陷阱： 插槽里直接用子组件变量会报错，必须通过 slot :data="data" 显式传递。
• 性能： 默认插槽放大量静态 HTML 且有父组件频繁更新时仍有开销，纯静态内容尽量在子组件内硬编码。
• 缩写规范： 独占默认插槽可写 Comp v-slot="item"；有具名插槽时默认插槽必须用 template #default 包裹。
• 避免过度设计： 仅文本/图标变化用 Props 就够了，插槽适用于结构不确定或需要控制反转的场景。
天健电子商务平台，愿成为企业数字化转型路上值得托付的同行者。双十一进行时，欢迎留言或联系我们，获取专属解决方案咨询。
2026.10.30
今天来说一点关于UI设计中像素的知识。像素是设计中的重要概念，本文将介绍物理像素和逻辑像素的区别以及常用的像素单位（px、pt、dp、sp），帮助大家在工作中更好地理解和应用。
2026.10.23
《互联网改的是中介，AI革的是人的岗位》讲过：互联网转型那几年，满街都是转型成功的演讲。
2026.10.15
随着人工智能（AI）技术飞速发展，Java 作为企业开发的主力语言，在AI智能体开发赛道上也释放出巨大潜力。
2026.09.28
产品
解决方案
关于我们
公司地址：成都市武侯区天益街38号理想中心3栋1810
Copyright© 天健世纪科技 All Rights Reserved.
蜀ICP备16016808号
长按/截图保存，微信识别二维码 或关注公众号“天健世纪科技”
扫一扫，关注我们
公司地址：成都市武侯区天益街38号理想中心3栋1810
Copyright© 天健世纪科技 All Rights Reserved. 蜀ICP备16016808号
