vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法

最新推荐文章于 2023-09-24 13:36:28 发布
最新推荐文章于 2023-09-24 13:36:28 发布
阅读量5.4k 收藏 14
点赞数 6
分类专栏： vue 文章标签： vue vue3 props debug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/114649431
版权

做项目时候遇到一件怪事：
父组件向子组件<dialog-info/>传个参数arrdata，是个数组
在这里插入图片描述
因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组
在这里插入图片描述
然后子组件中例行公事验证下是否正常拿到值
在这里插入图片描述
惊呆了，竟然是空的数组！
在这里插入图片描述
可是vue调试工具中props正常拿到了啊
在这里插入图片描述
有点意思，后来根据项目结构想了一下，发现问题出在哪里了

项目是这样的：
在这里插入图片描述
这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示<DialogInfo>子组件
而父组件向子组件传递过来的值arrdata，是在这里通过监听异步获取的
在这里插入图片描述
然后渲染在这个列表里：
在这里插入图片描述

这里就涉及到组件加载顺序的问题，为什么刚才我在子组件那里获取不到数据呢？因为子组件<DialogInfo>组件加载完毕的时候父组件那里都还没有获取到异步返回的值。

所以为了能获取到值，我们可以在父组件那里判断一下，只有获取到了值，也就是父组件向子组件传递的数组的值的length不为0才渲染：
在这里插入图片描述
这样就能保证子组件一定是等父组件准备好数据了，然后再加载，结果：
在这里插入图片描述

还有一个解决方法！

就是通过elementui的<el-dialog>组件内置的方法opened或者open执行回调函数，这两个函数会在<el-dialog>组件打开以后执行
在这里插入图片描述
我的子组件<dialog-info>就是一个封装的<el-dialog>组件，所以只要等到dialog打开完成了，在回调函数里面就一定可以拿到父组件传过来的值！

子组件中绑定opened方法：
在这里插入图片描述
定义回调方法并且返回：
在这里插入图片描述
这样我们点击按钮时候，dialog会弹出来
在这里插入图片描述
并且在回调方法中我们可以取到值，因为此时早就获得到数据了：
在这里插入图片描述

Akimoto Hiroshi
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中父组件向子组件通信的方法
08-30
可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue中父组件向子组件通信的方法，需要的朋友参考下吧
props传递对象_解决vue组件props传值对象获取不到的问题
weixin_39942726的博客
01-28 2119
先说问题，父组件利用props向子组件传值，浏览器 console 有这个值，但是获取不到内部的属性，困了我3个小时，真的**personalconsole以下为原代码1、home.vue(父组件)--personal是被传的参数:personal="personal">export default {data(){return{personal:{state:'',////判断是修改状态，...
vue父组件异步获取数据传给子组件的方法
10-18
主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
vue父组件触发事件改变子组件的值的方法实例详解
10-17
主要介绍了vue父组件触发事件改变子组件的值的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue父组件传给子组件数据,子组件得不到数据解决方法
热门推荐
m0_49714202的博客
07-21 1万+
Vue父组件传给子组件数据,子组件得不到数据解决方法
二维矩阵传参不会改变值_传参注意事项
weixin_39601088的博客
11-24 169
方法的传参过程int max(int ia, int ib) { … … … } int a = 5; int b=6; int res = m.max(a,b);为main方法中的变量a、b、res分配空间并初始化。调用max方法，为max方法的形参变量ia、ib分配空间。将实参变量的数值赋值到形参变量的内存空间中。max方法运行完毕后返回，形参变量空间释放。main方法中的res变量得到max...
VUE父组件异步获取数据，子组件接收的值为空
qq_37604998的博客
08-12 8371
在vue中引用Echarts图表，动态渲染数据时一直不展示数据。父组件异步请求获取数据传给子组件，子组件接收的打印的真实的值却为初始值，如下所示 父组件 子组件 原因的话：加载渲染的时候，请求是一个异步的操作，子组件在拿到数据前就渲染了，子组件没有监控到值得变化 父子组件加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父
vue父组件传参给子组件，子组件中获取不到。
zc135565的博客
12-30 8945
在项目中，遇到vue父子组件的传参问题，父组件传参给子组件，子组件在created和mounted等生命周期中获取不到，也无法使用父组件传递过来的参数。 父组件传参，一般分为两种情况： 1、父组中的原始数据 (即定义在父组件data中的原始数据),传输给子组件使用，子组件在生命周期中是可以获取并使用的。 2、父组件传给子组件的参数，是从接口中获取到的， 可能遇到的问题就是，如果在组件的create...
vue3父组件异步props传值，子组件接收不到值问题
m0_62857167的博客
04-18 6081
vue3、props、watch
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
前端面试题总结
weixin_45086164的博客
11-11 1812
前端面试题总结
前端关于对象中套用对象传参的小问题
最新发布
qq_63656102的博客
09-24 389
上面两种大家了解后这个问题才可以有很好的解决方法，就是在前端传输的时候给对象格式转为json字符串传输，在后端接收时候把json字符串转换为对象就可以了使用了。在js的对象是引用类型的，他如果里面还套用对象的话那么通过axios传参给后端就会出现一个问题，就是【object，object】这种包装形式。其实这就是要对数据传输中json格式要有一定的了解才可以解决这个问题。大家要了解这两个json格式的函数。那么如何来解决这个问题呢？
前端常见问题和技术解决方案
龙骑士-黎明的博客
06-06 3714
前端常见问题和技术解决方案
解决vue 父组件向子组件传值,子组件接收不到问题
liaoxianhua888的博客
09-09 4973
vue 父组件向子组件传值,子组件接收不到问题
vue props传递数组子组件获取不到 ，Vue父组件传给子组件的数组获取不到
weixin_41346436的博客
12-16 2783
问题描述 子组件的值是通过父组件通过循环赋值的，且为数组，父组件打印该循环的值是可以得到的，但是在自组卷中就获取不到了 子组件位置 子组件接收的值需要通过watch监听处理才可以 原因：父组件中定义的这个数组默认为空，值是在created钩子函数中axios获取到的，所以传入子组件的是data里定义的空数组。 解决：子组件用watch监听里一下，输出的当前的值是数组，之前的值是空，但是组件中用到的该变量依然打印为空。此时可将把要执行的方法也放入watch 中。 ...
vue 父子组件传值,子组件获取不到props值
潇湘子的博客
08-31 9173
问题: 父组件props传值给子组件，子组件在created中获取不到传过来的值 关于props传值，这里不赘述直接看官网：https://cn.vuejs.org/v2/guide/components-props.html 分析：因为父组件props传给子组件的值是通过后端接口返回的数据，也就是说是异步返回的数据，那么问题来了，你怎么知道后端什么时候请求完成，然后完成赋值呢？所以导致取值不同步，当然获取不到。 解决方案： 1.可以用setTimeout来延时，等异步请求数据完成了，在赋值(不推荐) 写一
解决vue中父组件通过props向子组件传递数据，子组件接收不到
CYL_2021的博客
05-04 6687
问题：父组件在挂载时向后端发起请求获取数据，然后将获取到的数据传递给子组件，子组件想要在挂载时获取数据，获取不到
vue中父组件向子组件传参
09-07
在Vue中，父组件向子组件传递参数有几种方式： 1. 使用props属性：在父组件中，在子组件的标签上通过属性绑定的方式传递数据。在子组件中，通过props属性接收传递过来的参数。 父组件： ```html <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { message: 'Hello from parent!' } } } </script> ``` 子组件： ```html <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script> ``` 2. 使用.sync修饰符：当需要在子组件中修改父组件的数据时，可以使用.sync修饰符。 父组件： ```html <template> <div> <child-component :message.sync="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { message: 'Hello from parent!' } } } </script> ``` 子组件： ```html <template> <div> <input v-model="message"> </div> </template> <script> export default { props: ['message'] } </script> ``` 以上是两种常用的父组件向子组件传递参数的方式。通过props属性可以将父组件的数据传递给子组件，而使用.sync修饰符可以实现双向数据绑定。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值