Vue2父组件拿到数据，echarts子组件数据未刷新

近日在开发老项目的过程中，遇到如下问题：

页面大致描述：

父组件页面中有6个不同的echarts图标，分别通过父组件传入对应的props——chartData来展示各自对应的数据。

简要说下代码功能吧：下图是父组件请求拿到所有子组件数据的函数：

        每通过页面下拉框选择一个设备，就会调用下图函数去请求对应数据

拿到所有的数据后存入chartsData变量中，然后通过getChartData函数对chartsData进行map操作进行二次处理，从而赋值到每个echarts图表props对应的变量中，是同步的过程。

之后通过ref拿到图表实例，调用initCharts函数去执行图表显示数据的一系列操作（初始化实例、setOption等）。

此时问题出现了：

当刷新页面后，第一次选择了一个设备，成功发送请求并也拿到了数据，但是页面并没有显示出对应的数据，显示为空。

对请求的值进行打印：父组件打印出来的数据和接口返回的一致，getChartData函数的处理也没问题，但是在子组件打印props中父组件传递过来的数据时，却是初始值null。

接着在选择一个设备，成功显示了对应的数据。

多次实验，发现都是在页面刷新后第一次选择设备后无法正常显示数据。

猜想：

从拿到数据，并对数据进行二次处理，再传递给子组件的过程是需要花费一定时间的，很可能存在子组件还没有来得及拿到父组件处理好的最新数据，就进行了页面的渲染。

验证：

延时触发子组件处理函数。此时，数据能够正常显示了，猜想结果成立。

解决方案：

肯定不能在项目代码中保留这样的延时处理方式，所以采用vue内置的nextTick方法，把初始化图标的操作延时到下一次DOM更新之前，这样就能保证下一次DOM更新时能够拿到最新的数据。