当前位置:首页 » 《关注互联网》 » 正文

解决vue中父组件通过props向子组件传递数据,子组件接收不到

21 人参与  2024年05月07日 17:12  分类 : 《关注互联网》  评论

点击全文阅读


问题:父组件在挂载时向后端发起请求获取数据,然后将获取到的数据传递给子组件,子组件想要在挂载时获取数据,获取不到。

代码示例:

//父组件<template>  <div>    <HelloWorld :message="message"></HelloWorld>  </div></template><script setup>import HelloWorld from "./components/HelloWorld.vue";import { onMounted, ref } from "vue";const message = ref("1");onMounted(() => {//模拟异步请求   setTimeout(() => {    message.value = "1312";  }, 0);});</script><style scoped></style>
//子组件<template>  <div>{{message}}</div></template><script setup>import { onMounted, defineProps } from "vue";const props = defineProps(["message"]);onMounted(() => {  console.log("传递过来的数据", props.message);});</script><style scoped></style>

打印结果:props.message为空,为父组件message的初始值,但是子组件数据能渲染出来
在这里插入图片描述

原因分析:

父子组件的生命周期执行顺序如下:

加载数据渲染过程

父组件beforeCreate父组件created父组件beforeMount子组件beforeCreate子组件created子组件beforeMount子组件mounted父组件mounted

更新渲染数据

父组件beforeUpdate子组件beforeUpdate子组件updated父组件updated

销毁组件数据过程

父组件beforeUnmount子组件beforeUnmount子组件unmounted父组件unmounted

由上述加载数据渲染过程可知子组件的mounted是先于父组件的mounted,所以获取不到异步请求后获取到的数据

解决方法

方法一:使用v-if控制子组件渲染的时机

//父组件<template>  <div>    <HelloWorld :message="message" v-if="isShow"></HelloWorld>  </div></template><script setup>import HelloWorld from "./components/HelloWorld.vue";import { onMounted, ref } from "vue";const message = ref("1");const isShow=ref(false);onMounted(() => {//模拟异步请求   setTimeout(() => {    message.value = "1312";    isShow.value=true;//获取数据成功,再让子组件渲染  }, 0);});</script><style scoped></style>

方法二:使用watch对父组件传递过来的数据进行监控

//子组件<template>  <div>{{message}}</div></template><script setup>import { defineProps,watch} from "vue";const props = defineProps(["message"]);//监听传过来的数据watch(()=>props.message,()=>{ console.log("传递过来的数据", props.message);})</script><style scoped></style>

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/104793.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 说好的受苦呢?我快被宠上天了傅景臣姜瑜曼完本_说好的受苦呢?我快被宠上天了(傅景臣姜瑜曼)
  • 爱意知已晚:结局+番外(江知意顾裴延)_爱意知已晚:结局+番外列表_笔趣阁(江知意顾裴延)
  • 全书浏览爱意悠悠终成恨:结局+番外(顾廷轩宋晚棠)_爱意悠悠终成恨:结局+番外(顾廷轩宋晚棠)全书结局
  • (此后余生皆孤寂:结局+番外)免费(岑雨茉傅庭升)_此后余生皆孤寂:结局+番外列表_笔趣阁岑雨茉傅庭升
  • 叶墨谨幽璃迟少瑜:+后续+全书(叶墨谨幽璃)结局_(叶墨谨幽璃叶墨谨幽璃迟少瑜:+后续+全书结局)结局列表_笔趣阁(叶墨谨幽璃)
  • 从此你我银河相望:结局+番外经典荡气回肠(沈时愿谢聿深)_从此你我银河相望:结局+番外经典荡气回肠沈时愿谢聿深
  • 表哥压上身家非要跟我赌章节试读_桑塔纳房契安静反转剧情碎片化试读
  • 「爱如星辰坠落」后续已完结_「乔云顾沥川清清」小说后续在线免费阅读
  • 穿成路人甲我才是天道亲闺女+后续+(池玥)全书免费_(池玥)穿成路人甲我才是天道亲闺女+后续+后续(池玥)
  • 皇后娘娘城楼一跃,陛下重生情怯正版列表_皇后娘娘城楼一跃,陛下重生情怯正版(谢瑜修虞槿栀)
  • 星河明灭无端:结局+番外爱恨纠葛(温穗颜宋承砚)全书浏览_星河明灭无端:结局+番外爱恨纠葛全书浏览
  • 幽思燃烬忘川路:+后续+结局经典荡气回肠(叶墨谨幽璃)_幽思燃烬忘川路:+后续+结局经典荡气回肠(叶墨谨幽璃)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1