问题:
当对话框 (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();
})
},