12、前端组件通信模式详解

前端组件通信模式详解

在前端开发中，组件之间的通信是一个关键问题，尤其是在微前端架构下，不同团队开发的组件需要协同工作。本文将详细介绍几种常见的组件通信模式，并给出相应的代码示例和实现步骤。

1. 单向数据流与“props down, events up”

数据流动通常遵循单向数据流模式，即外层应用（如产品页面）的状态变化会传递到嵌套应用（如购买按钮）。这种模式通过属性将更新后的状态传递给子组件，而反向通信则通过事件实现。

2. 子组件向父组件通信

在一个拖拉机销售网站的案例中，由于推出了白金版拖拉机，引发了用户论坛的讨论。部分用户抱怨价格高，还有用户要求增加其他版本。第一批 100 台白金版拖拉机在一天内售罄。

Team Decide 的 UX 设计师 Emma 对购买按钮的用户交互体验不太满意。当前点击购买按钮后会弹出系统警告对话框，用户必须关闭该对话框才能继续操作。Emma 希望用一个动画绿色对勾在主产品图片上确认加入购物车的操作。

然而，加入购物车的操作由 Team Checkout 负责，他们虽然知道用户何时成功添加商品到购物车，但无法在主产品图片上添加新动画，因为这部分页面不属于他们。直接操作会导致用户界面的强耦合，未来产品页面的更改可能会破坏动画效果。

为了解决这个问题，两个团队达成了一个明确的协议。Team Checkout 在用户成功添加商品到购物车时，通过购买按钮上的事件通知 Team Decide，Team Decide 则根据这个事件触发动画。

更新后的购买按钮合约如下：
| 项目 | 详情 |
| ---- | ---- |