解决 Element-ui 对话框 （Dialog）中含子组件时，使用 refs 调用该子组件为 undefined 的问题

问题：
当对话框 （Dialog）中包含子组件时，我们使用 this.$refs 试图获取该组件的 dom 并操作时，发现获取的 dom 为 undefined 导致后续的方法报错；

<template>
  <div>
    <el-dialog :visible.sync="propertyDialog" width="60%" center>
      <lineChart
        ref="chart"
        :xAxisArr="xAxisArr"
        :yAxisArr="yAxisArr"
      ></lineChart>
    </el-dialog>
  </div>
</template>	

<script>
import lineChart from "@/components/lineChart.vue";
export default {
    
    
  data() {
    
    
    return {
    
    
      xAxisArr: [],
      yAxisArr: [],
      propertyDialog: false,
    };
  },
  components: {
    
    
    lineChart,
  },
  methods: {
    
    
    showCharts() {
    
    
      this.propertyDialog = true;
      console.log(this.$refs.chart); 
      this.$refs.chart.drawLineChart();
    },
  },
};
</script>

解决：
因为自己之前用过 refs 来调用子组件方法，但是没有遇到过这种问题，很是无奈加之彷徨。
后来在度娘怀里遨游一番，发现和 element-ui 框架有关系，总之什么关系呢，我也说不清啦。

加上一个 this.$nextTick 就可以啦，这个回调函数的意思呢，其实简单理解就是：等所有的DOM元素节点都渲染完成以后才执行其里面的方法。
具体什么意思呢， 请参考 Vue中 $nextTick() 与 Vue.nextTick() 原理及使用

showCharts(params) {
    
    
  this.propertyDialog = true;
  this.$nextTick(()=>{
    
    
  	console.log(this.$refs.chart);
  	this.$refs.chart.drawLineChart();
  })
},