ElementUI dialog初始化获取不到元素

前言：Vue+ElementUI开发项目，使用Dialog作为子组件时，父组件初始化子组件内部未能获取到dom元素；

1. 假设 在父组件初始化完成之后，从后台异步拿到数据传递给子组件；

2. 子组件接收到父组件数据之后，做某种处理 返回给父组件 用于展示；

3. 比如我需要做一个修改功能，整个页面作为父组件、Dialog作为子组件、并且嵌套级联面板用于勾选数据（也可以想象一下嵌套的是一个form表单、table表格、Echarts图表）；

4. 修改功能必须要有回显、即原有新增的数据毫不改变的展示在修改功能，这时就需要获取到Dialog的嵌套组件，并且赋值给嵌套组件，嵌套组件里面经过处理之后把需要展示的数据传递给子组件用于页面展示；

应用场景：

先展示一下需求：

面向专业一栏，需要加载完父组件之后通过子组件处理并展示在页面上，不调用子组件的同时让子组件加载并返回所需数据，逻辑方面很简单，我们只需要把异步获取到的数据直接传递给子组件，子组件直接返回即可，但是在父组件初始化完毕之后 子组件并没有如愿以偿的返回所需数据；

上代码：

<template>
  <div class="Profession">
    <el-dialog
      width="35%"
      title="选择专业"
      :visible.sync="Myoff"
      :before-close="SendData"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <!-- ----------------------------------------------------------------- -->
      <el-cascader-panel
        v-model="Mydata"
        ref="Elcascader"
        :options="this.$store.getters.ProSelect"
        :props="props"
      ></el-cascader-panel>
      <!-- ----------------------------------------------------------------- -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="SendData">取 消</el-button>
        <el-button type="primary" @click="SendData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

 

 

首先可以很清楚的看到 当页面加载完毕之后子组件并未传递数据给父组件、、当我打开一次子组件之后，无论是提交/关闭/取消子组件均可以正常显示Tag，这是为什么呢？于是就怀疑各种钩子函数顺序不对，v-if、钩子函数、执行顺序、触发方式等等统统没有找到问题根源，但是唯一发现的就是有个报错信息；

 

getCheckNodes未定义？不应该啊，这个是element提供的官方函数，怎么会未定义呢？再细想、这个方法是基于Vm实例的，若Vm实例不存在，拿酒就像原生window.onload、window.document等等原生方法一样，没有window任何方法皆是未定义的，那么进一步观察：

 

发现73行打印的undefined，那明显就是没有找到refs的dom元素，相当于document.getelementbyid...未拿到dom是一个道理；

百思不得骑姐之下向ElmentUI文档发起了总攻，竟然、竟然、竟然发现官方警告：真是众里寻他千百度、一瞅文档喊卧槽啊！

竟然用到了一个不知道什么实现逻辑的‘懒渲染’？好吧，但是我觉得这个open方法压根不能解决问题，open方法可以打开Diolag弹框，但是这不符合我的需求，所以打印VueComponent之后发现果然没找到在级联面板上ref对应的dom，但是确找到了“取消按钮”和“确认按钮”的实例，再想想这哥俩为啥可以拿到？再看了一下element元素，发现这俩竟然在dialog-footer里面

那我是不是也可以把级联面板放在foot里面呢？

<template>
  <div class="Profession">
    <el-dialog
      width="35%"
      title="选择专业"
      :visible.sync="Myoff"
      :before-close="SendData"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <!-- ----------------------------------------------------------------- -->
      <!-- 懒渲染区域 -->
      <!-- ----------------------------------------------------------------- -->
      <div slot="footer" class="dialog-footer">
        <el-cascader-panel
          v-model="Mydata"
          ref="Elcascader"
          :options="this.$store.getters.ProSelect"
          :props="props"
        ></el-cascader-panel>
        <el-button @click="SendData">取 消</el-button>
        <el-button type="primary" @click="SendData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

结果刚刷新页面就展示出了Tag，不得不说 这个操作是真的骚啊！！

解决之后：

如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！