浅谈如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题

问题背景：

业务需求需要用到一个数据批量上传和上传模板导入功能，并且在很多个页面中都需要用到。但是每个页面调用的上传或模版下载依赖的接口地址或者接口方法都有区别。基于此，想要将这个公共上传组件抽离出来，并且尽量低耦合，能够满足不同页面的调用和传参。

以下言论，是一个小白解决问题的过程，若思考思路和知识面限制，还请各路大佬指点

• 痛点一：如何解决不同页面的接口调用方法依赖问题
• 痛点二：如何解决在调用页面执行组件内部的某些方法前，如何添加父级组件层面的校验问题

关于依赖

尝试动态注入依赖

import

关于痛点一，第一个想到的，就是能不能执行依赖的动态注入，但是所有的接口调用方法均按模块封装成api.js文件,并且模块中通过export 进行导出，需要使用import { xxx } form './XXXpath'导出到组件中，方能进行使用。并且import导入为静态导入，于是放弃这个尝试。

require

接下来想到另一个导入的方式require，但是require导入的是一个模块（具体了解CommonJS），而接口api.js 如果重新改动，牵扯太多，于是也放弃此法。

其他思考

如果将api.js放到公共组件中，则耦合度会很高，后期新增或者修改接口依赖，或者进行其他扩展，就要伤筋动骨，不符合低耦合的理念，因此不考虑在组件内部注入相关接口依赖。

解决办法

既然不打算将接口依赖放到组件中，那么就只有暴露出来给父级组件，在某些时间的时候，调用某些接口，执行某些方法。

部分代码如下：

 <div class="AS-upload">