Element-uiダイアログボックス（ダイアログ）にサブコンポーネントがある場合、refsを使用してサブコンポーネントを呼び出すことが未定義であるという問題を解決します

問題：
ダイアログボックス（ダイアログ）にサブコンポーネントが含まれている場合、this。$ refsを使用してコンポーネントのDOMを取得して操作しようとすると、取得したDOMが未定義であることがわかり、後続のメソッドでエラーが報告されます。

<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>

解決策：
以前にrefを使用してサブコンポーネントメソッドを呼び出したことがありますが、この種の問題は発生していないため、無力で躊躇します。
その後、Du Niangの腕の中をさまよって、それが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();
  })
},