4. 组件化开发与自定义组件面试题
组件化是小程序工程化的核心能力，面试重点考察你对组件通信、插槽、behaviors、抽象节点等机制的理解深度。本章先梳理回答框架，再通过三个典型问答和真实项目模板，帮你形成可迁移的表达。
💡 面试加分点： 回答时先区分“同一页面内”和“跨页面”场景，再按通信方向逐一列举。提到
relations 和 selectComponent 会体现对小程序 API 的熟悉度。
面试问答卡片
Q1：小程序组件间有哪些通信方式？各自适用场景是什么？
面试官考察点
是否系统掌握组件通信架构，能否结合实际场景选择最优方案。
回答框架
- 父子组件：props 传递数据 + triggerEvent 触发事件（最常用）。
- 兄弟组件：通过父组件中转，或使用全局事件（app.globalData / getApp()）。
- 祖先与后代：selectComponent 获取实例直接调用，或利用
relations建立关联。 - 跨页面通信：使用全局 store（mobx / observable）、页面栈或本地存储。
简短示例回答
“父子组件使用 props 传递配置项，子组件通过 triggerEvent 上报操作；兄弟组件通过父组件中转事件；复杂场景引入 mobx 全局状态管理，避免层层传递。”
可能追问
“兄弟组件通信有哪些性能隐患？” “selectComponent 获取后直接修改数据会触发渲染吗？”
⚠️ 避坑提醒：不要在任何场景都使用全局变量，会导致数据流混乱；尽量优先使用 props/events，保持单向数据流。
Q2：小程序自定义组件中的插槽（slot）如何使用？有哪些限制？
面试官考察点
对组件内容分发机制的理解，以及多插槽、作用域插槽的掌握程度。
回答框架
- 默认插槽：
<slot></slot>，直接嵌入内容。 - 具名插槽：通过
name属性区分，组件内使用<slot name="header"/>。 - 作用域插槽：利用
wxs或自定义组件内部状态传递数据给父组件填充内容（需注意小程序限制）。 - 限制：仅支持 WXML 插槽，不能在 slot 中传递复杂逻辑；多插槽需
component: true。
简短示例回答
“实现一个 dialog 组件，使用具名插槽区分标题、内容、按钮区域；作用域插槽通过 slot-scope 传递表单数据，让父组件控制渲染逻辑。”
可能追问
“如何实现动态插槽切换？” “插槽内部的组件生命周期是否独立？”
⚠️ 避坑提醒：小程序中
slot-scope 需要配合 wxs 或自定义数据绑定，不要与 Vue 语法混淆；多插槽时避免嵌套过深造成渲染性能下降。
Q3：behaviors 和抽象节点有什么区别？各自解决什么问题？
面试官考察点
区分代码复用与动态组件两种维度，考察对小程序组件体系的设计能力。
回答框架
- behaviors：类似 mixin，复用逻辑（数据、生命周期、方法），可组合多个。
- 抽象节点：
<slot>占位，运行时由父组件指定具体组件节点，实现组件动态替换。 - 核心差异：behaviors 解决“逻辑复用”，抽象节点解决“节点结构动态化”。
- 配合使用：抽象节点内部可以引用 behaviors 公共逻辑，形成更灵活的组件架构。
简短示例回答
“behaviors 抽取表单验证逻辑供多个组件使用；抽象节点实现卡片组件内部 slot 根据入参动态渲染图文列表或视频播放器，提升组件通用性。”
可能追问
“抽象节点如何保证传入的组件有相同的接口？” “多个 behaviors 出现同名属性怎么办？”
⚠️ 避坑提醒：抽象节点要求传入的组件必须具有相同的 properties 和 methods，务必用文档约束；behaviors 避免过多全局混入，防止命名冲突。
项目案例：电商小程序组件库重构
通过一个真实项目模板，展示如何系统应用组件通信、behaviors、抽象节点等能力，提升面试说服力。
项目名称： 电商小程序核心组件库重构
业务背景： 原有组件代码散落在各个页面，无法复用，且多处存在重复逻辑，维护成本高。业务快速迭代要求组件化、可配置。
规模指标： 覆盖 12 个业务模块，200+ 页面，日均 PV 500 万+。
技术栈： 微信小程序原生 + WeUI 风格 + mobx 状态管理 + 自定义组件系统。
业务背景： 原有组件代码散落在各个页面，无法复用，且多处存在重复逻辑，维护成本高。业务快速迭代要求组件化、可配置。
规模指标： 覆盖 12 个业务模块，200+ 页面，日均 PV 500 万+。
技术栈： 微信小程序原生 + WeUI 风格 + mobx 状态管理 + 自定义组件系统。
核心难点
- 历史组件混乱，需要逐步替换而不影响线上稳定性。
- 不同业务对卡片组件要求不同（图文、视频、直播），需要灵活切换。
- 组件间通信链路长（多层嵌套），需设计合理的通信层。
面试高频追问
- “重构过程中如何保证兼容性？——通过抽象节点 + 配置表，旧组件保留一段时间并行运行。”
- “组件通信频繁时如何优化性能？——使用 computed 缓存 + 防抖，避免不必要渲染。”
- “behaviors 冲突如何解决？——定义明确的优先级，利用数据链路日志定位。”
可迁移回答话术
“在电商组件库重构中，我主导了基于抽象节点和 behaviors 的组件体系设计。通过组件通信分层（父子 props + 全局 observable），将复用率从 20% 提升到 50%；针对卡片组件，利用抽象节点实现动态组件渲染，减少 30% 的重复代码。同时设计了一套兼容策略，确保线上无感知升级。”
“在电商组件库重构中，我主导了基于抽象节点和 behaviors 的组件体系设计。通过组件通信分层（父子 props + 全局 observable），将复用率从 20% 提升到 50%；针对卡片组件，利用抽象节点实现动态组件渲染，减少 30% 的重复代码。同时设计了一套兼容策略，确保线上无感知升级。”
—— 第 4/30 章 完 ——