前言：Vue+ElementUI開發項目，使用Dialog作爲子組件時，父組件初始化子組件內部未能獲取到dom元素；
-
假設 在父組件初始化完成之後，從後臺異步拿到數據傳遞給子組件；
-
子組件接收到父組件數據之後，做某種處理 返回給父組件 用於展示；
-
比如我需要做一個修改功能，整個頁面作爲父組件、Dialog作爲子組件、並且嵌套級聯面板用於勾選數據（也可以想象一下嵌套的是一個form表單、table表格、Echarts圖表）；
-
修改功能必須要有回顯、即原有新增的數據毫不改變的展示在修改功能，這時就需要獲取到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，不得不說 這個操作是真的騷啊！！
解決之後：
如果我的博客幫助你解決了開發問題，請不要吝嗇你的小紅心哦！