当elementui的el-dialog组件中包含子组件时，用$refs调用子组件时的undefined问题

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

elementui的el-dialog弹框组件中包含了一个子组件。

然后我通过$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. (index.vue?52f4:403)
    at Array. (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)