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

119 阅读 0 评论 79 点赞

我是靠谱客的博主留胡子芒果，这篇文章主要介绍JavaScript公共组件父子依赖调用及子校验父条件问题解决，现在分享给大家，希望可以做个参考。

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

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

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

关于依赖

尝试动态注入依赖

import

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

require

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

其他思考

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

解决办法

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

部分代码如下：

复制代码

<div class="AS-upload">
  <div class="uploaded-list" v-if="uploadFileNameList.length > 0">
【已上传文件】<span class="file-name" v-for="(name,index) in uploadFileNameList" :key="index">{{ name }}</span>
  </div>
  <div class="upload-header">
<div class="action-buttons">
  <el-upload
ref="upload"
class="upload-demo"
:action="uploadUrl"
:headers="headers"
:data="uploadParams"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false"
  >
<el-button slot="trigger" size="mini" type="primary">选择表单</el-button>
<el-button size="mini" type="success" @click="uploadClick">上传</el-button>
  </el-upload>
</div>
<div class="tools-buttons">
  <ASTemplateDownload :path="templatePath" :export-name="exportName"></ASTemplateDownload>
</div>
  </div>
  <div class="upload-footer">
<el-button size="mini" type="primary" @click="submitBatchAdd">提交</el-button>
<el-button size="mini" type="default" @click="uploadClose">取消</el-button>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="AS-upload">
  <div class="uploaded-list" v-if="uploadFileNameList.length > 0">
【已上传文件】<span class="file-name" v-for="(name,index) in uploadFileNameList" :key="index">{{ name }}</span>
  </div>
  <div class="upload-header">
<div class="action-buttons">
  <el-upload
ref="upload"
class="upload-demo"
:action="uploadUrl"
:headers="headers"
:data="uploadParams"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:limit="1"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false"
  >
<el-button slot="trigger" size="mini" type="primary">选择表单</el-button>
<el-button size="mini" type="success" @click="uploadClick">上传</el-button>
  </el-upload>
</div>
<div class="tools-buttons">
  <ASTemplateDownload :path="templatePath" :export-name="exportName"></ASTemplateDownload>
</div>
  </div>
  <div class="upload-footer">
<el-button size="mini" type="primary" @click="submitBatchAdd">提交</el-button>
<el-button size="mini" type="default" @click="uploadClose">取消</el-button>
  </div>
</div>

js只拿一个方法进行举例 uploadClick()上传按钮点击，此处的判断this.isVerify是用于父级条件校验的，后面会说到，现在先不展开。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//点击上传
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('请先选择一个文件');
  }
},

可以看到，在执行某些操作的时候，都在公共组件中，利用$emit将事件抛出，然后在父组件进行事件监听：this.$emit('upload-click', null);

父组件html部分，通过监听事件@upload-click，并在js中写一个方法进行接收

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--  父级组件调用组件-->
<ASUpload ref="ASUpload"
  is-verify
  :upload-url="uploadUrl"
  :upload-params="uploadParams"
  template-path="/static/template/xxx.xlsx"
  export-name="xxx.xlsx"
  @close="uploadClose"
  @upload-click="uploadClick"
  @upload-error="uploadError"
  @upload-cancel="uploadCancel"
  @upload-submit="uploadSubmit"
></ASUpload>

父组件js部分

复制代码

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

以上，就将接口依赖，从公共组件中解耦出来了。

子组件校验父组件条件

上面的代码有用到一个isVerify字段，这个字段是用于判断是否需要进行校验的标识。以上传操作为例子，点击之后，判断该字段，如不需要校验，则直接执行默认上传方法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** props*/
props:{
//是否需要校验，校验通过后才传入允许上传，传入true，则需要手动调用组件内部的上传方法
isVerify: {
  type: Boolean,
  default: false,
},
}
/** methods */
//点击上传
uploadClick() {
  `是否需要校验：${this.isVerify ? '需要' : '不需要'}`
  if (this.isVerify) {
this.$emit('upload-click', null);
return false;
  }
  this.uploadHandler();
},