vue中异步请求到的数据父向子传值如何动态传递

最新推荐文章于 2024-03-10 12:07:41 发布
最新推荐文章于 2024-03-10 12:07:41 发布
阅读量1.2k 收藏 6
点赞数
分类专栏： 问题解答 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55764371/article/details/127808604
版权

vue中异步请求到的数据父向子传值如何动态传递

由于axios请求是异步的而组件之间传递数据是同步的这个时候就会出现一些问题
当数据请求过来的时候子组件已经渲染这个时候传递过去的数据是空的。

首先要知道父子组件的渲染顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程 父beforeUpdate->父updated

销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

了解完这个就直接上干货

方法1：在调用子组件的时候使用v-if指令来判断数据的状态 如果有数据了 那就渲染 (不推荐) 原因 ：
因为这样如果数据量大的话会渲染非常的慢，刷新页面会出现闪动的效果

方法2：侦听器watch 在子组件添加侦听器 侦听传递过来的数据 ，如果有数据了那就重新赋值 (不推荐) 原因 ：
原因很简单因为每次数据发生变化他都会被调用一次

方法3：给组件添加ref属性 然后在子组件中定义一个函数 把请求到的数据通过
this.$refs.[refAttribute].methodName(params) 将数据传递给子组件 (推荐)

方法4：直接将数据存放在vuex中 让子组件通过vuex去取数据 (推荐)

YanLing0116
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父组件异步获取的数据传给子组件的方法
qq_33911541的博客
05-23 1272
vue父组件异步获取的数据传给子组件的方法
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue2 子组件怎么使用父组件传递传递过来的异步数据？？？
几乎每一篇都是保姆级讲解
07-15 462
使用发现是打印不到数据的,因为子组件的mounted比父组件的Mounted先执行,这种情况下可以考虑使用watch监听。在开发中,很多情况下都会使用父组件的数据给子组件,但是很多情况下都是传异步的,如果你直接。...
vue父组件向子组件动态传值的两种方法
08-28
主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下
VUE父组件向子组件动态传值
最新发布
何由彻的博客
03-10 509
调用子组件的方法,来将需要传递给子组件的值,传递到子组件的方法中,利用该方法,来给子组件属性赋值。parentId: 就是子组件props中要填写的值,他绑定的是你父组件中需要传入子组件的值。然后使用watch来检测该值变化,如果变化,就调用子组件实例方法。子模块中的方法是用来得到父组件中改变得到的新值。子组件只需要有一个接收值并赋值的方法。我这里是传入的品类的父级ID。然后和可以达到和使用props一样的效果。子组件使用props。前两步一样,父组件中注册,使用。
vue解决组件传值异步问题
热门推荐
qiqi学习园地
04-28 1万+
转载自：http://www.jb51.net/article/117447.htm 案例一 父组件parent.vue // asyncData为异步获取的数据，想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> &..
Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理
IT全栈 华强工作室
04-11 7860
问题描述 父组件通过Promise等其他异步方式获取异步数据，并传递给子组件，子组件直接显示没有问题，若对数据进行处理，则拿到的数据都是父组件初始值。 原因分析 父组件通过Promise等其他异步方式获取异步数据，在尚未等到数据返回时，子组件 created已经执行完毕，故此时子组件中的数据为父组件上次的数据。 父子组件的生命周期： 一、加载渲染过程 父beforeCreate–> 父cre...
vue 父组件向子组件动态传值
m0_69895544的博客
11-01 996
需要使用父组件调用子组件的方法来实现动态传值。
vue父子组件之间传递数据（vue学习笔记）
dogeggcrazy的博客
11-26 7815
父子组件之间传递数据的方法
vue---父子组件传输异步数据
wlijun_0808的博客
06-16 4730
vue---父子组件传输异步数据
Vue组件通信：父组件向子组件传递数据 & Props详解
qq_53322872的博客
07-15 9228
本文讲述了父组件如何向子组件传递数据，并且详解介绍了props在vue中的用法。
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
详解vue2父组件传递props异步数据到子组件的问题
08-30
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 子组件向父组件传值方法
08-27
下面小编就为大家分享一篇vue 子组件向父组件传值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 组件间的通信之子组件向父组件传值的方式
10-15
主要介绍了vue 组件间的通信之子组件向父组件传值的方式总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue父组件异步获取数据传值给子组件
weixin_40923809的博客
07-20 5632
问题背景 近期做项目时需要父组件在created()钩子函数中异步获取数据然后传给子组件，子组件在created()钩子函数中获取传过来的props，并进行初始化，发现子组件在created()钩子函数中获取不到props。 问题原因 首先解释一下Vue的生命周期函数，以及组件嵌套时父子组件生命周期的触发顺序。 大家都知道，在单个组件加载的过程中生命周期的发生顺序是这样的： 关于生命周期钩子的详...
Vue总结2.0父子组件传值以及父子之间的生命周期函数（基于项目总结）
weixin_45740510的博客
02-28 3255
Vue2.0总结一、Vue父子组件传值二、Vue父子之间的生命周期函数 一、Vue父子组件传值 1、父组件向子组件传值 使用v-bind绑定 + props <!-- 父组件father.vue --> <template> <div> <div>这是父组件要传给子组件的参数:{{msg}}</div> <!-- 1.传递: value1为动态参数msg的参数名，名字自定义，与子组件接收参数名同名⭐ v
vue父子组件通信之父组件异步传值(watch)
qq_46639390的博客
04-19 1258
【代码】vue父子组件通信之父组件异步传值(watch)
vue3中父向子传值
10-26
在Vue3中，父组件向子组件传值可以使用props属性。在父组件中通过v-bind指令将数据绑定到子组件的props属性上，子组件就可以通过props属性接收父组件传递的数据。具体实现步骤如下： 1. 在子组件中定义props属性，用于接收父组件传递的数据。 2. 在父组件中使用v-bind指令将数据绑定到子组件的props属性上。 3. 在子组件中使用props属性获取父组件传递的数据。 例如，父组件向子组件传递一个字符串类型的数据，可以按照以下步骤实现： 1. 在子组件中定义props属性，用于接收父组件传递的数据。 ``` <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'ChildComponent', props: { message: { type: String, required: true } } }); </script> ``` 2. 在父组件中使用v-bind指令将数据绑定到子组件的props属性上。 ``` <template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import { defineComponent } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ name: 'ParentComponent', components: { ChildComponent }, data() { return { parentMessage: 'Hello, child!' }; } }); </script> ``` 3. 在子组件中使用props属性获取父组件传递的数据。 ``` <template> <div> {{ message }} </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'ChildComponent', props: { message: { type: String, required: true } } }); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值