VueJS组件数据流问题：可复用<CreateCard/>组件API调用位置最优方案咨询

关于<CreateCard/>公共组件的API逻辑封装方案选择 #

两种方案没有绝对最优，完全取决于组件的复用定位和场景差异：

方案1：API逻辑封装在<CreateCard/>内部 #

• 适用场景：所有复用该组件的父组件，调用的是同一份提交接口、仅参数有差异，且提交后的通用处理逻辑（比如全局成功提示、默认失败兜底）完全一致
• 优势：父层代码更简洁，仅需传递apiParams类参数即可，后续接口逻辑调整只需要修改一次公共组件，不会出现多父组件重复修改的问题
• 注意点：需要预留@success、@error类自定义事件，方便少数有特殊后续逻辑的父组件监听处理，不要把所有逻辑完全写死在组件内部

方案2：API逻辑放在父组件实现 #

• 适用场景：不同父组件复用<CreateCard/>时，调用的提交接口完全不同、或者提交前后的业务逻辑差异极大，比如有的场景提交后要跳转、有的要触发其他组件数据更新、有的需要二次确认逻辑
• 优势：公共组件只承担UI渲染、基础表单校验的职责，复用性更强，不会被特定业务逻辑绑定死；数据流更透明，请求全流程由调用方完全掌控，排查问题不需要深入公共组件内部逻辑
• 注意点：公共组件需要通过@submit等事件把表单完整数据、校验结果暴露给父组件，父层拿到数据后自行处理请求逻辑

Vue数据流与复杂组件搭建通用建议 #

• 可复用组件优先遵循单一职责原则，除非100%确认所有复用场景的业务逻辑完全一致，否则优先把非UI的业务逻辑（接口调用、特殊业务校验等）放在父层实现，公共组件只做通用UI交互能力
• 严格遵守单向数据流规则：props向下传递数据，事件向上抛出结果，禁止在子组件内部直接修改props的引用值，避免出现数据流混乱
• 复杂业务组件可以拆分为「容器组件+展示组件」两层：容器组件负责处理业务逻辑、接口调用、数据加工；展示组件只负责接收props渲染UI、触发事件通知上层，两者解耦后维护效率会高很多
• 公共组件要做好props类型校验、默认值配置，同时预留足够的插槽、自定义事件做拓展，避免后续新增场景频繁修改公共组件底层逻辑

内容的提问来源于stack exchange，提问作者DFX Nguyễn