在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

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