在vue中使用refs获取对象的高度，宽度为0

Question

在vue模板中，控制子元素（echarts图表组件）和父元素（div）的大小相等。在父元素的mounted钩子中根据refs获取父元素（div）的高度和宽度传递给子元素，可是每次在mounted打印出的高度都是0代码如下：

<template>
<div class="pie" ref="monthPie">
   <v-colorPie :domHeight="domHeight"/>
</div>
</template>
<script>
export default {
    data(){
        return{
            domHeight:0
        }
    },
     mounted(){
         alert(this.$refs.monthPie.offsetHeight)
     }
}
</script>
<style>
.pie{
    margin-top:1%
    height:93%
    width:100%
}
</style>

Answer 1

这种问题的思路是，你可以在子组件mounted钩子中使用

//子组件
this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕 
    this.$emit('eventGetHeight',this.$el.offsetHeight);
});

父组件中监听eventGetHeight事件，并取得这个数据

Answer 2

你要看这个时候子组件是否加载完成

Answer 3

请问这个问题解决了么 同遇到