當elementui的el-dialog組件中包含子組件時，用$refs調用子組件時的undefined問題

參考文章：https://blog.csdn.net/qq_39861508/article/details/78955722

elementui的el-dialog彈框組件中包含了一個子組件。

<el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" width="60%">
      <el-form :rules="rules" ref="dataForm" :model="dataForm" label-position="right" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="this.$t('logisticsUser.businessLicense')" prop="businessLicense">
              <v-singleImage ref="imageLicense" imageType=1></v-singleImage>
            </el-form-item>
          </el-col>

然後我通過$refs爲該子組件裏面的屬性賦值，在控制檯上卻顯示undefined。

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;

        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true
        
        this.$refs.imageLicenseWatch.fileList = imgFileList
        //查看時，上傳圖片按鈕不可操作
        this.$refs.imageLicenseWatch.showdisabled = true
        //查看時，不顯示上傳控件
        this.$refs.imageLicenseWatch.uploadDisabled='disabled'

 報錯如下：

errorLog.js:17 TypeError: Cannot set property 'fileList' of undefined
    at VueComponent.handleWatch (index.vue?52f4:411)
    at Proxy.boundFn (vue.esm.js:188)
    at click (index.vue?8790:431)
    at VueComponent.invoker (vue.esm.js:1997)
    at VueComponent.Vue.$emit (vue.esm.js:2507)
    at VueComponent.handleClick (element-ui.common.js:9560)
    at boundFn (vue.esm.js:188)
    at invoker (vue.esm.js:1997)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js:1795) "event handler for "click""

還有一個坑：this.watchDialogFormVisible = true 要寫在前面 否則會報錯

errorLog.js:17 TypeError: Cannot set property 'fileList' of undefined
    at VueComponent.<anonymous> (index.vue?52f4:403)
    at Array.<anonymous> (vue.esm.js:1806)
    at MessagePort.flushCallbacks (vue.esm.js:1727) "nextTick"

還有一個坑：imgFileList 變量的賦值要使用 res.data.data ，如果使用 this.dataForm 賦值，你會發現this.dataForm爲null。

下面附上正確的寫法：

方法一：利用 this.$nextTick(function(){ 實現：

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;

        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true

        this.$nextTick(function(){
          this.$refs.imageLicenseWatch.fileList = imgFileList
          //查看時，上傳圖片按鈕不可操作
          this.$refs.imageLicenseWatch.showdisabled = true
          //查看時，不顯示上傳控件
          this.$refs.imageLicenseWatch.uploadDisabled='disabled'  
        })

方法二： 利用 setTimeout(()=>{ 實現：

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;

        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true
        setTimeout(()=>{
          this.$refs.imageLicenseWatch.fileList = imgFileList
          //查看時，上傳圖片按鈕不可操作
          this.$refs.imageLicenseWatch.showdisabled = true
          //查看時，不顯示上傳控件
          this.$refs.imageLicenseWatch.uploadDisabled='disabled' 
        },0)