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

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

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

問題背景

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

以下言論，是一個小白解決問題的過程，若思考思路和知識面限制，還請各路大佬指點

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

關(guān)于依賴

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

import

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

require

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

其他思考

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

解決辦法

既然不打算將接口依賴放到組件中，那么就只有暴露出來給父級組件，在某些時間的時候，調(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只拿一個方法進行舉例 uploadClick()上傳按鈕點擊，此處的判斷this.isVerify是用于父級條件校驗的，后面會說到，現(xiàn)在先不展開。

//點擊上傳
uploadClick() {
  `是否需要校驗：${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('請先選擇要上傳的Excel文件');
    return false;
  }
  //判斷是否已經(jīng)上傳過文件，已上傳的話，調(diào)用取消接口，將對應需求單id請求取消接口，清空后端臨時數(shù)據(jù)，清空完成后，清空已上傳文件名、id，同時開始觸發(fā)文件上傳邏輯
  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('請先選擇一個文件');
  }
},

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

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

<!--          父級組件調(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部分

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

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

子組件校驗父組件條件

上面的代碼有用到一個isVerify字段，這個字段是用于判斷是否需要進行校驗的標識。以上傳操作為例子，點擊之后，判斷該字段，如不需要校驗，則直接執(zhí)行默認上傳方法

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

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