admin管理员组文章数量:1130349
写静态数据的时候父组件传值子组件接收并渲染是没问题的，但当父组件异步获取数据，子组件接收数据会晚于渲染，就会产生接收不到的问题，我在用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);//先打印，接收不到
看一下控制台打印顺序
写静态数据的时候父组件传值子组件接收并渲染是没问题的，但当父组件异步获取数据，子组件接收数据会晚于渲染，就会产生接收不到的问题，我在用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);//先打印，接收不到
看一下控制台打印顺序
版权声明：本文标题：watch监听，解决Vue3父组件异步props传值，子组件接收不到的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754941678a2744395.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论