0


watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题

写静态数据的时候父组件传值子组件接收并渲染是没问题的,但当父组件异步获取数据,子组件接收数据会晚于渲染,就会产生接收不到的问题,我在用echarts绘制图表时图表就直接不显示

用watch监听props数据并在watch内进行赋值操作可解决该问题

直接上代码

父组件,vue3语法

setup() {
            // 用定时器模拟发请求异步获取后端接口的数据
            const weekNumber = ref([])
            setTimeout(()=>{
                weekNumber.value=[150, 120, 200, 80, 170, 110, 130]
                console.log( weekNumber.value[0]);//值为150,后打印
            },1000)
            console.log( weekNumber.value[0]);//值为undefined,先打印
            return{ weekNumber};
        }

子组件props正常接收,但是接收的数据要放在watch中监听

watch(()=>props.weekNumber,(newVal) => {
        console.log("newVal:",newVal);
        info.options.series[0].data =newVal
        initChart()//重绘echarts图表
        console.log("weekNumber在watch之后:",props.weekNumber);//后打印,接收到新数据
      })
      console.log("weekNumber在watch之前:",props.weekNumber);//先打印,接收不到
    

看一下控制台打印顺序


本文转载自: https://blog.csdn.net/weixin_46764819/article/details/128311949
版权归原作者 半里_辰昏 所有, 如有侵权,请联系我们删除。

“watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题”的评论:

还没有评论