vue父组件传参子组件界面未更新

前言

首先记录一个组件的生命周期顺序:

1.挂载(初始化相关属性)
 - beforeCreate
 - created
 - beforeMount
 - mounted
2.更新(元素或组件的变更操作)
 - beforeUpdate
 - updated
3.销毁(销毁相关属性)
 - beforeDestory
 - destoryed

下图是图示:
vue父组件传参子组件界面未更新_第1张图片
结合父子组件,其生命周期为:

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

一、遇到的问题

今天在前端界面开发过程中,子组件是一个封装好的echart散点图,想要通过在父组件读取本地json格式的配置数据确定散点图的点位数据和尺寸大小。
在父组件的mounted函数中编写了读取配置数据并设置传入子组件的参数,在子组件的watch函数中监听数据的变化并实时更新界面。
但是界面上子组件一直未更新,反复检查了代码,并没有发现错误,很是费解。

二、问题定位和解决方式

想到可能是由于父子组件生命周期顺序导致的数据没有传进去,子组件mounted挂载先于父组件,通过界面输出log,定位到是由于在父组件读取配置数据耗时较长,导致父组件挂载函数中的语句还没有执行好,子组件已经更新,于是在子组件的watch函数加了延时函数解决问题。

setTimeout(() => {
},100);

你可能感兴趣的:(Vue,vue,前端,vue.js)