使用elementui的el-dialog组件，里面包含子组件时，用refs调用子组件时出现undefined问题

问题：

使用elementui时，在el-dialog组件中套入了el-form组件，代码如下：

 <el-dialog
      :title="textMap1[dialogStatus1]"
      :visible.sync="dialogFormVisible1"
      @close="clear"
 >
      <el-form
        :model="trialForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item
          v-if="this.dialogStatus1 === 'noPass'"
          label="不通过原因"
          prop="reason"
        >
          <el-input
            clearable
            type="textarea"
            v-model="trialForm.reason"
            :rows="2"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确定</el-button>
          <el-button @click="dialogFormVisible1 = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

当显示dialog对话框时，通过 this.$refs.ruleForm获取el-form，出现undefined

解决方法：

可以使用this.$nextTick 解决；

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

代码如下：

 this.$nextTick(function () {
     console.log(this.$refs.ruleForm);
 })

这样就可以解决问题了。