快捷導(dǎo)航

公共組件父子依賴調(diào)用及子校驗(yàn)父條件問題解決

更新時(shí)間：2022年10月17日 08:44:20 作者：從前有只碼農(nóng)

這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗(yàn)父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問題背景

業(yè)務(wù)需求需要用到一個(gè)數(shù)據(jù)批量上傳和上傳模板導(dǎo)入功能，并且在很多個(gè)頁面中都需要用到。但是每個(gè)頁面調(diào)用的上傳或模版下載依賴的接口地址或者接口方法都有區(qū)別?；诖耍胍獙⑦@個(gè)公共上傳組件抽離出來，并且盡量低耦合，能夠滿足不同頁面的調(diào)用和傳參。

以下言論，是一個(gè)小白解決問題的過程，若思考思路和知識(shí)面限制，還請(qǐng)各路大佬指點(diǎn)

痛點(diǎn)一：如何解決不同頁面的接口調(diào)用方法依賴問題
痛點(diǎn)二：如何解決在調(diào)用頁面執(zhí)行組件內(nèi)部的某些方法前，如何添加父級(jí)組件層面的校驗(yàn)問題

關(guān)于依賴

嘗試動(dòng)態(tài)注入依賴

import

關(guān)于痛點(diǎn)一，第一個(gè)想到的，就是能不能執(zhí)行依賴的動(dòng)態(tài)注入，但是所有的接口調(diào)用方法均按模塊封裝成api.js文件,并且模塊中通過export 進(jìn)行導(dǎo)出，需要使用import { xxx } form './XXXpath'導(dǎo)出到組件中，方能進(jìn)行使用。并且import導(dǎo)入為靜態(tài)導(dǎo)入，于是放棄這個(gè)嘗試。

require

接下來想到另一個(gè)導(dǎo)入的方式require，但是require導(dǎo)入的是一個(gè)模塊（具體了解CommonJS），而接口api.js 如果重新改動(dòng)，牽扯太多，于是也放棄此法。

其他思考

如果將api.js放到公共組件中，則耦合度會(huì)很高，后期新增或者修改接口依賴，或者進(jìn)行其他擴(kuò)展，就要傷筋動(dòng)骨，不符合低耦合的理念，因此不考慮在組件內(nèi)部注入相關(guān)接口依賴。

解決辦法

既然不打算將接口依賴放到組件中，那么就只有暴露出來給父級(jí)組件，在某些時(shí)間的時(shí)候，調(diào)用某些接口，執(zhí)行某些方法。

部分代碼如下：

<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只拿一個(gè)方法進(jìn)行舉例 uploadClick()上傳按鈕點(diǎn)擊，此處的判斷this.isVerify是用于父級(jí)條件校驗(yàn)的，后面會(huì)說到，現(xiàn)在先不展開。

//點(diǎn)擊上傳
uploadClick() {
  `是否需要校驗(yàn)：${this.isVerify ? '需要' : '不需要'}`
  if (this.isVerify) {
    this.$emit('upload-click', null);
    return false;
  }
  this.uploadHandler();
},
//上傳處理函數(shù)
uploadHandler() {
  //前置判斷：1、必須已選擇文件
  if (this.fileList.length === 0 && this.uploadedIds.length === 0) {
    this.$message.error('請(qǐng)先選擇要上傳的Excel文件');
    return false;
  }
  //判斷是否已經(jīng)上傳過文件，已上傳的話，調(diào)用取消接口，將對(duì)應(yīng)需求單id請(qǐng)求取消接口，清空后端臨時(shí)數(shù)據(jù)，清空完成后，清空已上傳文件名、id，同時(shí)開始觸發(fā)文件上傳邏輯
  if (this.uploadedIds.length !== 0) {
    //拋出上傳取消事件
    this.$emit('upload-cancel', this.uploadedIds[0]);
  }
  if (this.fileList.length !== 0) {
    this.uploadLoading = this.$message({
      message: '文件上傳中，請(qǐng)稍后...',
      showClose: true,
      iconClass: 'el-icon-loading',
      duration: 0
    })
    this.$refs.upload.submit();
  } else {
    this.$message.error('請(qǐng)先選擇一個(gè)文件');
  }
},

可以看到，在執(zhí)行某些操作的時(shí)候，都在公共組件中，利用$emit將事件拋出，然后在父組件進(jìn)行事件監(jiān)聽：this.$emit('upload-click', null);

父組件html部分，通過監(jiān)聽事件@upload-click，并在js中寫一個(gè)方法進(jìn)行接收

<!--          父級(jí)組件調(diào)用組件-->
<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部分

//上傳前校驗(yàn)
uploadClick(){
  if( !this.uploadVerify()) return false;
  //調(diào)用接口等其他業(yè)務(wù)邏輯
  //...
  //校驗(yàn)完成后，手動(dòng)調(diào)用上傳
  this.$refs.ASUpload.uploadHandler();
},

以上，就將接口依賴，從公共組件中解耦出來了。

子組件校驗(yàn)父組件條件

上面的代碼有用到一個(gè)isVerify字段，這個(gè)字段是用于判斷是否需要進(jìn)行校驗(yàn)的標(biāo)識(shí)。以上傳操作為例子，點(diǎn)擊之后，判斷該字段，如不需要校驗(yàn)，則直接執(zhí)行默認(rèn)上傳方法

/** props*/
props:{
    //是否需要校驗(yàn)，校驗(yàn)通過后才傳入允許上傳，傳入true，則需要手動(dòng)調(diào)用組件內(nèi)部的上傳方法
    isVerify: {
      type: Boolean,
      default: false,
    },
}
/** methods */
//點(diǎn)擊上傳
uploadClick() {
  `是否需要校驗(yàn)：${this.isVerify ? '需要' : '不需要'}`
  if (this.isVerify) {
    this.$emit('upload-click', null);
    return false;
  }
  this.uploadHandler();
},

將上傳邏輯根據(jù)判斷進(jìn)行分流，當(dāng)組件外的父級(jí)需要做某些判斷的時(shí)候，此處上傳需要額外校驗(yàn)其他參數(shù)不能為空，在父級(jí)執(zhí)行完校驗(yàn)之后，在通過$refs手動(dòng)調(diào)用公共組件中的uploadHandler方法。