相互独立的组件中如何不通过服务在组件B复用组件A的逻辑

• 直接抽离纯逻辑片段为普通ES模块
  先把componentA.ts里的代码捋一遍，把和组件模板渲染、组件实例生命周期强绑定的代码和纯业务逻辑拆开：比如数据格式转换、表单校验规则、接口请求处理、交互逻辑判断这类和UI没关系的代码，直接剪切到单独的普通.ts文件里导出就行，不用做任何框架层面的服务注册。组件A本身改下对应方法的引用路径就能正常运行，组件B要用的时候直接import对应方法就行，完全不涉及服务层的搭建，对原有代码的改动量极小。
• 类组件场景直接用继承复用
  如果你用的是Angular、React类组件这类面向对象模式的组件，连逻辑都不用抽，直接让组件B的类继承组件A的类就可以：

  export class ComponentB extends ComponentA {
    // 这里只写B自己的差异化逻辑，需要改A原有方法的话直接重写就行
  }
  

  继承后B可以直接访问A里所有的非私有属性和方法，如果重写了生命周期钩子，记得在钩子内部调用super.对应生命周期名()，保证A里的初始化逻辑能正常跑。
• 改造组件A为无渲染逻辑组件
  不想动A里的逻辑结构的话，直接给A加插槽（Vue/Angular）或者render props（React）支持：把所有业务逻辑、状态管理都留在A的内部，把所有UI相关的渲染节点全部换成插槽位，对外暴露内部的状态和方法。组件B用的时候直接引入组件A，不使用A自带的默认UI，通过插槽拿到A暴露的逻辑和状态，渲染B自己的UI就行。这种方式对A的原有逻辑几乎零改动，两个组件完全独立，没有任何全局耦合。
• 用原生ES模块共享状态替代服务单例
  如果两个组件需要共享联动的状态，不用建框架层面的全局服务，直接新建一个普通TS文件，把需要共享的状态、操作方法写在里面导出：

  // shared-a-logic.ts
  export const sharedState = { /* 共享的状态字段 */ }
  export const sharedMethod = () => { /* 共享的操作方法 */ }
  

  两个组件都直接import这个文件里的内容就行，ES模块本身的单例特性会自动保证两边的状态同步，效果和服务一致，但完全不需要走依赖注入、服务注册那套流程。

避坑提醒：别用全局混入、原型链挂载这类隐式注入的方式复用逻辑，后续出问题根本找不到逻辑来源，上面列的几个方案都是显式引用，依赖关系清晰，维护成本低。

内容的提问来源于stack exchange，提问作者RAKSHA