vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据

时间:2024-04-02 19:29:56

前端新人,在第一次对接口的时候遇到不少小问题,都是特别细节的问题,今天记录一下遇到的让我最有收获的一个问题:
首先,我要做的就是根据“数量”和“面积”echarts表显示不同的数据
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
我拿到接口数据之后,在父组件创建两个数组,然后用下标的方式向数组里面赋值:
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
将数组通过属性的方式传进echarts子组件里,根据用户选择的“数量”和“面积”不一样,传进去不同的数组,然后展示:
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据在确保了子组件和父组件数据都正确,语法都正确的情况下,数据在第一次进入页面时还是没办法显示:
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
但是我们切换“数量”和“面积”按钮时,数据就显示出来了,所以现在就发现问题:
页面第一次加载时,子组件没有应用上父组件传进来的数据
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
然后我反复检查了子组件和子组件的语法,反复试过了修改子组件的监听方法,但是都没有用:
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
然后我咨询了公司前端的前辈,然后就找到问题了!!!
原来我在父组件里给要传进子组件的数组赋值时采用的是下标的方式赋值的

vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
解决方法:数组赋值改用Array.prototype.push()方法赋值
vue/父组件请求来的值,子组件无法接收/父组件无法给echarts子组件传值/页面第一次加载时,子组件没有应用上父组件传进来的数据
其实是一个很简单的问题,但由于我之前没注意这么多细节,就忽略掉了,然后我们就来谈谈为什么会这样
原因:Array.prototype.push()添加的元素会带有get()和set()方法,通过下标=是没有的
我的思路是,在第一次打开页面时,传进子组件的数组是还没有赋值之前的空数组,浏览器解析html页面时,按照顺序是先解析html代码,从上到下渲染,所以渲染到该子组件时,js还并没有执行到请求数据,数组赋值的这一段,这个时候echarts需要的数据,就是数组的初始值,我设置的是空,所以就没有数据,在执行到请求数据,数组赋值的一段时,数组被赋值,但是由于下标=没有get()方法,所以不会主动触发echarts子组件回流,所以只能等子组件主动重绘(即切换按钮)的时候才会把数组得到的新值应用上。