vue 父组件延时获取子组件的值,避免子组件数据为空

最新推荐文章于 2023-03-07 16:09:16 发布
最新推荐文章于 2023-03-07 16:09:16 发布
阅读量968 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue 父组件获取子组件数 vue 子组件数据为空
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42394457/article/details/98608698
本文探讨了在Vue中，父组件如何通过延时获取子组件数据的方法，以确保获取到的是子组件已完成渲染后的有效数据，避免获取到空或初始数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

全局头部每次加载页面的时候,都会发送ajax请求后端的用户数据，而我的另外一个组件需要获取头部请求到的用户的数据,以此做出相应的逻辑。

头部是作为子组件使用的，而另外的组件自然就是父组件。所以引申出来的父组件主动获取子组件的数据。

但是在子组件渲染完成之前,父组件是获取不到子组件的数据的。所以需要延时获取。（不断判断）

子组件: 在 created 钩子里请求数据.
在这里插入图片描述
以 一个 属性判断当前是否请求到了数据。
在这里插入图片描述

剩下的事就是在 父组件里 获取 hasUser 了，如果 hasUser 了，就直接获取用户数据，
否则 继续 setTimout 获取， 这样就避免获取到的数据为子组件的 空数据 或 初始数据

父组件: 在 mounted 钩子里获取 ，必须事mounted 钩子，created 钩子还没有 渲染完成,所以无法获取

在这里插入图片描述

Vue 父组件如何触发子组件中的方法
grootbaby
05-07 803
子组件 <template> <div> child </div> </template> <script> export default { name: "child", props: "someprops", methods: { parentHandleclick(e...
vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef‘ of undefined“
u013474230的博客
06-09 4085
vue 父组件调用子组件的方法报错，“TypeError: Cannot read property ‘subDialogRef’ of undefined” 最近用vue做的一个界面，引入了一个子组件，在父组件中调用子组件的方法时，报错提示： [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘methods’ of undefined” 子组件中定义的方法如下： export default { data(){
vue延迟和调用子组件方法失败
gys9895的博客
09-15 772
vue setTimeout–延迟操作 有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了 setTimeout(() =>{ 要延迟的代码 },延迟时间); ...
vue父组件异步获取动态数据传递给子组件 ，子组件获取不到值或者延时获取
肖肖肖丽珠的博客
01-09 1万+
如果父组件中要传给子组件的值是从接口里面获取的，那么子组件刚开始得到的是空值。这个时候不应该传给子组件的。你可以在子组件里面延时加载。或者是按照下面方法来 父组件： &lt;template&gt;        &lt;div&gt;               &lt;chartpie  :chartValue="chartValue" v-if="chartValue.lengt...
vue的mounted种函数延迟执行
计算机辅助工程
12-26 4014
mounted() { setTimeout(() => { alert(“hello”) }, 20)} // 延迟20毫秒执行
vue父组件向子组件动态传值的两种方法（父组件动态通过axios获取，子组件获取为空解决方法）
KingIQueen的博客
06-26 1156
在一些项目需求中需要父组件向子组件动态传值，比如我这里的需求是，父组件动态通过axios获取返回的图片url数组然后传给子组件，上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种， 方法一： props传值，这里注意一个问题，传过来的值需要用watch监听并赋值，否则这里获取到的是空数组 父组件： <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="produc..
记录父组件ref获取子组件或者孙子组件方法报错解决
一位00后记录自己的前端成长路上遇到的坑 ~
03-07 904
记录父组件ref获取子组件或者孙子组件方法报错解决
vue 子组件watch监听不到prop的解决
10-14
在Vue项目中，子组件通过prop接收来自父组件的数据是常见的通信方式。然而，在处理异步数据时，有时子组件的watch属性无法监听到prop的变化，这会导致组件状态不及时更新。为了解决这个问题，可以采用以下几种方法：...
vue打开子组件弹窗都刷新功能的实现
10-14
`:visible.sync`是一个Vue的双向绑定特性，它允许父组件和子组件之间共享和同步数据。当父组件改变`paramAddDialog`的值时，子组件的`visible`状态也会相应改变，从而实现弹窗的显示和关闭。 例如，在父组件中，...
Vue组件用于Vue组件的延迟渲染
08-10
1. **Vue懒加载（Vue懒组件）**：Vue 允许我们按需加载组件，即在实际需要时才去获取组件的代码。这可以通过 `import()` 动态导入实现。例如： ```javascript // 在路由配置中 { path: '/some-path', component: ...
vue 父组件传值给子组件错过子组件渲染时机
几何之星
01-29 624
问题 ==> 由于请求的数据量过大，造成了数据延迟，导致子组件渲染时拿不到数据。 前端小白的解决思路 ==> 等拿到数据以后，设置一个flag，再使用v-if控制子组件显示，本质就是刷新子组件。 <template> <Son v-if = "isShow == true" :data = "data" @save="save" > </Son> </template&g
Vue等待父组件请求数据返回后，再渲染子组件
yongyafang123的博客
11-24 7495
问题描述：在写页面过程中有时子组件需要获取到父组件请求获得的数据后才能显示（比如：百度富文本的引用，回显数据的时候） 想了很多办法 最后看到这种比较可行，方便 <UE :defaultMsg=activityForm.introduction v-if="activityForm.introduction" :config=config ref="ue"></UE> 及...
vue问题：父传子时传递的值接收有延迟
专注于前后端技术知识分享。
11-13 4283
由于父组件在给子组件传递的值是请求回来的，所以会有延迟，而这时子组件也初始化完毕，导致子组件接收的值是父组件初始化时创建的默认为空的初始值。在父组件中给子组件标签加上v-if判断一下，判断要传递的值不为空时，再初始化子组件，就可以接收到父组件请求回来的值。父组件要向子组件传递接口请求回来的数据，然后在子组件中将props接收到的数据渲染到输入框内，操作非常非常简单，但是我发现不管怎么搞，渲染的值都是父组件中定义的初始空值。父组件给子组件传递的值是请求回来的，所以可能会有延迟。| 广场舞大军中最靓的仔。
Vue——父子组件间异步动态获取数据传递数据时，子组件获取不到值或者延时获取
热门推荐
where_slr的博客
08-14 1万+
父子组件传值时，父组件从接口获取数据，通过props传递给子组件。实际情况下：父组件获取数据有时间延迟，传递的props值为空，子组件接收的数据为props默认值 父子组件生命周期 父组件异步请求数据传递给子组件 父子组件接收数据有延迟 父子组件生命周期对比 一、加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate...
vue父传子的时父组件要传给子组件的值有延迟导致子组件接收失败
yycc的博客
07-03 7830
父组件内: <template> <div class="wrapper"> <!--内容管理--> 父组件传递请求回来的值给子组件 <v-sidebar :slidebarData="slidebarData" v-if="slidebarData.length>0"></v-sidebar> ...
vue 子组件接收父组件数据的方法
梧桐树
12-30 8648
vue 子组件接收父组件数据的方法
vue循环for里使用延时
wwm_wang_wen的博客
06-30 4488
vue for setTimeout 循环 延时
关于Vue项目中子组件中获取父组件传来的值为空。
周不会前端的博客
06-11 2105
我在项目中要做一个九宫格抽奖，我把这个九宫格作为一个组件引入到我需要展示的页面。 然而每次九宫格出来了，但是我传来的数据打印都为空， 然后我发现我的九宫格子组件在我进入父组件页面的时候就已经触发了moutend钩子， 于是我就想到了是否应该给这个子组件一个开关。如下 <to-draw v-if="parentsDraw" :showDraw="showDraw" :drawData="drawData" @closeDraw="closeDraw"></to-draw> paren
vue3 父组件使用子组件，子组件页面数据没有显示
最新发布
03-11
### Vue3 中父组件使用子组件时页面数据显示问题的解决方案 在 Vue3 开发过程中，如果遇到父组件使用子组件而子组件中的数据未能正常显示的情况，通常是因为异步数据未完全加载就尝试渲染子组件所致。为了确保子组件能够正确接收并展示来自父组件的数据，可以采用 `v-if` 指令来延迟子组件的渲染直到所需数据准备完毕[^3]。 #### 实现方法 通过引入布尔变量 `dataReady` 来追踪数据状态，在模板中应用 `v-if="dataReady"` 控制子组件实例化时机： ```html <template> <!-- 只有当 dataReady 为真时才创建 child-component --> <child-component v-if="dataReady" :data="parentData"></child-component> </template> <script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; // 初始化标志位和待传递的数据 const dataReady = ref(false); const parentData = ref(null); // 模拟异步操作或复杂计算过程 setTimeout(() => { // 假设经过一段时间后数据已准备好 dataReady.value = true; parentData.value = '已完成的数据处理'; }, 2000); // 这里模拟了一个两秒延时后的成功场景 </script> ``` 这种方法不仅适用于简单的定时器模拟案例，对于实际项目里的 API 请求或其他耗时任务同样有效。一旦确认所有必要的资源都已被获取到，则设置 `dataReady=true` 并触发视图更新，从而让子组件得以安全地访问最新的属性值。 此外，还可以考虑使用侦听器（Watcher）监控特定 prop 的变化情况，并据此调整内部逻辑；或是借助于生命周期钩子函数如 `onMounted()` 或者组合式API内的相应替代品来进行更精细的操作[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值