1.背景:将父组件实时获取的接口数据传递给子组件,子组件渲染页面
2.问题:由于父子组件的mounted
生命周期顺序为子先父后,导致子组件prop
拿到的数据为空
3.尝试过的方法: 在子组件的mounted
增加this.$nextTick(() => {}
,使之加载完成时渲染,未解决,拿到的数据仍然是空
4.解决办法1)在父组件里面,子组件挂载的地方使用v-if,父组件拿到数据之后改变v-if的值使子组件渲染,但是这样会导致子组件的mounted
执行两遍,第一遍拿到的空,第二遍拿到的是有值的,所以需要额外在渲染接口那里增加判断条件,if(this.$refs.monitorSvg) {}
如果子组件被加载则开始渲染页面
5.解决办法2)在父组件里面,子组件挂载用ref定位,子组件的渲染操作使用方法封装起来,当父组件拿到数据之后,使用this.$refs.M3Chart.setOption()
在父组件里面调用子组件的方法, 使子组件渲染