第4章 组件化开发与自定义组件

组件化是微信小程序架构的核心思想，面试中高频考察组件通信、插槽机制、behaviors 三大模块。本章从实际面试场景出发，拆解回答框架与避坑要点。

问答卡片1：组件通信方式

面试官考察点：

• 是否理解组件层级关系下的通信差异
• 能否区分属性传参、事件回调、全局状态等方案
• 是否具备实际项目中的方案选型能力

回答框架：

示例回答：（约60字）父子通信用 properties 与 triggerEvent；兄弟通信使用全局事件总线（如 app.js 中定义的事件中心）；跨层级用 getApp().globalData 或 store。优先选 properties + 事件，避免滥用全局变量导致数据流混乱。

可能追问：

• 如何实现兄弟组件之间的直接通信而不依赖全局？
• properties 的 observer 与 watch 有什么区别？

问答卡片2：插槽（slot）

面试官考察点：

• 是否掌握 <slot> 基本用法
• 是否了解多插槽（具名插槽）的配置方式
• 能否说明插槽与 template 的区别

回答框架：

1. 单插槽：组件内直接用 <slot></slot> 占位
2. 多插槽：组件配置 multipleSlots: true，使用 name 属性区分
3. 使用限制：默认插槽只能有一个，具名插槽可多个
4. 数据传递：插槽内容本身可访问外部数据，但组件内部无法控制插槽内数据

示例回答：（约80字）组件内用 <slot> 或 <slot name="header"> 占位，启用 multipleSlots: true 支持多插槽。父组件通过 slot="header" 分发内容。注意：插槽内容仅外部可控制，组件内无法观察其变化。

可能追问：

• 如何向插槽内传递数据（作用域插槽）？
• 插槽与 wx:if 结合使用时有什么陷阱？

问答卡片3：behaviors（混合）

面试官考察点：

• 是否理解 mixin 模式的优点
• 是否清楚属性、方法、生命周期合并规则
• 能否举例说明 behaviors 的实际使用场景

回答框架：

1. 定义：behaviors 是代码复用单元，可包含 properties、data、methods、生命周期
2. 合并规则：定义阶段按引入顺序，属性/方法同名时后定义的覆盖
3. 生命周期：所有 behaviors 的钩子都会依次执行（先引入先执行）
4. 典型场景：表单验证、日志上报、列表分页等通用逻辑

示例回答：（约70字）behaviors 类似 mixin，可将公共逻辑抽离。例如定义一个 form-validator behavior。多个 behaviors 冲突时，同名属性或方法后引入的生效，生命周期则依次全部执行。注意避免循环依赖。

可能追问：

• 如何调试 behaviors 中覆盖的属性？
• behaviors 与组件继承的区别？

项目案例：电商小程序商品详情页组件化重构