JavaScript公共组件父子依赖调用及子校验父条件问题解决

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

以下言论，是一个小白解决问题的过程，若思考思路和知识面限制，还请各路大佬指点
- 痛点一：如何解决不同页面的接口调用方法依赖问题
- 痛点二：如何解决在调用页面执行组件内部的某些方法前，如何添加父级组件层面的校验问题
关于依赖

尝试动态注入依赖

import

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

require

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

其他思考

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

解决办法

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

部分代码如下：
```
   0">
【已上传文件】{{ name }}
  
```
选择表单上传

//点击上传 uploadClick() { `是否需要校验：${this.isVerify ? '需要' : '不需要'}` if (this.isVerify) { this.$emit('upload-click', null); return false; } this.uploadHandler(); }, //上传处理函数 uploadHandler() { //前置判断：1、必须已选择文件 if (this.fileList.length === 0 && this.uploadedIds.length === 0) { this.$message.error('请先选择要上传的Excel文件'); return false; } //判断是否已经上传过文件，已上传的话，调用取消接口，将对应需求单id请求取消接口，清空后端临时数据，清空完成后，清空已上传文件名、id，同时开始触发文件上传逻辑 if (this.uploadedIds.length !== 0) { //抛出上传取消事件 this.$emit('upload-cancel', this.uploadedIds[0]); } if (this.fileList.length !== 0) { this.uploadLoading = this.$message({ message: '文件上传中，请稍后...', showClose: true, iconClass: 'el-icon-loading', duration: 0 }) this.$refs.upload.submit(); } else { this.$message.error('请先选择一个文件'); } },

//上传前校验 uploadClick(){ if( !this.uploadVerify()) return false; //调用接口等其他业务逻辑 //... //校验完成后，手动调用上传 this.$refs.ASUpload.uploadHandler(); },

/** props*/ props:{ //是否需要校验，校验通过后才传入允许上传，传入true，则需要手动调用组件内部的上传方法 isVerify: { type: Boolean, default: false, }, } /** methods */ //点击上传 uploadClick() { `是否需要校验：${this.isVerify ? '需要' : '不需要'}` if (this.isVerify) { this.$emit('upload-click', null); return false; } this.uploadHandler(); },

关于依赖

尝试动态注入依赖

其他思考

解决办法

子组件校验父组件条件

总结