在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元素都已经渲染完毕&nbsp;&nbsp; &nbsp; this.$emit('eventGetHeight',this.$el.offsetHeight);});父组件中监听eventGetHeight事件，并取得这个数据

Answer 2

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

Answer 3

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