组件Component
两个页面都用询盘卡，怎样改一次就保持一致？
组件是可组合、可复用的界面单元，封装一组相关的结构和行为。组件可以接收不同输入，也可以在各个实例中保留独立状态。
把经常一起出现的一块界面做成一个单元，再把不同资料传进去。同一套结构可以显示两家公司，不用维护两份近似代码。
像同一种文件夹版式：栏目安排相同，装进去的客户资料不同，每个文件夹也可以独立标记处理状态。
类比到这里为止：组件不是把所有内容绑在一起。相同组件的两个实例可以有不同数据和状态；是否同步，取决于数据放在哪里。
官网线索与展会线索共用一张询盘卡。修改公共字段标签时两处一起更新，点击其中一张的展开按钮时，另一张可以保持不动。
一张卡片怎样被重复使用
- 公共定义
- 固定布局、字段名称、操作反馈。
- 输入（Props）
- 传入公司、需求等资料，生成不同的卡片实例。
- 实例状态
- 记录某张卡是否展开；默认不会让所有卡一起展开。
什么时候值得拆成组件
重复出现、需要一致维护，或者有明确独立行为时，拆分往往有帮助。不必把每一段文字都拆成一个组件。
试试下面的公共标签开关，再分别展开两张卡。你会看到“公共定义同步”和“实例状态独立”是两件事。
两个页面都用询盘卡，怎样改一次就保持一致？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
组件 在项目中负责什么
- 什么时候用
- 同一类询盘卡、产品卡或表单区已经在两个以上页面出现，并且之后要保持同样的结构和行为时。
- 它解决什么
- 它让一次修改可以在所有使用位置保持一致，同时让页面只负责组合，不重复维护细节。
- 它不负责什么
- 一次性出现、没有独立职责的文字和装饰，不必为了组件化强行拆开。
- 放进真实项目
- 官网表单和展会线索都要展示公司、联系人、需求和跟进状态，于是共用一张询盘卡。
组件的边界来自稳定责任，不来自文件大小
产品页和展会线索页都要呈现公司、联系人、来源、需求和跟进状态。各写一份，字段改动很快不同步。
- 01
找出跨页面重复的结构和行为。
- 02
为组件写清输入、状态与输出事件。
- 03
让页面负责数据来源与布局组合。
复用结构和行为，不等于共享每一份数据和状态。
容易混淆的地方
组件负责稳定的结构与行为；页面负责组合自己的数据和布局。
两张询盘卡共用组件。修改公共按钮文案后，两张一起变化；展开第一张时，第二张不动。这说明什么？
看到重复，先判断责任
官网表单和展会线索页都要展示公司、联系人、需求、来源和跟进状态。两处卡片越来越不一致。
你可以这样告诉 AI Agent
我在处理这件事：官网表单和展会线索都要展示公司、联系人、需求和跟进状态，于是共用一张询盘卡。请以“组件”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：AI 产品、外贸独立站与界面拆解实践