vue父组件接受子组件传递的数组有值但是为空的那些事儿

最新推荐文章于 2024-06-07 14:37:59 发布
最新推荐文章于 2024-06-07 14:37:59 发布
阅读量1.7k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Arange_/article/details/124491328
版权
在Vue应用中，开发者遇到一个组件通信的难题：父组件能够打印出子组件传递的值，但该值在后续处理中显示为空数组。尝试了setTimeout、$nextTick和watch等解决方案均未成功。问题可能与生命周期或数据同步有关，尽管通过复制变量暂时解决了问题，但并非最佳实践。寻求社区高手的指导。

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

今天用组件通信时遇到一个问题，就是父组件在接受子组件传递的值的时候，是可以打印出东西来的而且值也没有错，但是length为0，并且接下来的处理中用这个数组是为空的，如图：在这里插入图片描述
如图片中展示我的数据是可以打印的，但是走接口的时候却是空数组：
在这里插入图片描述
我尝试的方法：
1、将代码放入setTimeout
失败
2、将代码放入$nextTick
失败
3、用watch监听子组件传入的值
失败
也考虑过是不是父子组件生命周期的问题，然后用v-if试了一下也是失败，
最后把我的参数全部拷贝了一份出来是可以的，但JSON.stringify（JSON.parse（）)就不行，不知是为何
在这里插入图片描述

但我知道这样好像并不是最好的解决方法，但好歹也能解决。望大佬们指点

关于Vue那些事儿—Javascript 传递异步操作 #Promise#
超逸の学习技术博客
02-03 844
文章目录Promise in js概念Promise 对象有以下两个特点基本的 api我们可以做三件事:1. 封装同步与异步代码2. 捕获同步异常3. 多个异常捕获，更加精准的捕获4. 获取两个 Promise 的返回值5. finally6. bind7. All。非常用于于处理一个动态大小均匀的 Promise 列表8. Join。非常适用于处理多个分离的 Promise9. Props。处理...
VUE学习笔记
最新发布
知而获智，智达高远
10-20 1216
以上的内容都选择no就可以了。接下来进入到项目中，开始安装项目。插播一下，需要先安装cnpm，国内的镜像地址，并且设置环境变量。设置两个文件夹，这两个文件夹的位置就是nodejs的根目录的下面打开安装根路径创建两个空文件夹node_cache 、node_global然后设置环境变量。更换 npm 的 registry 源为国内源安装cnpm的设置成功。
Vue不能观察到数组length的变化
08-27
因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下
VUE父组件异步获取数据，子组件接收的值为空
qq_37604998的博客
08-12 9107
在vue中引用Echarts图表，动态渲染数据时一直不展示数据。父组件异步请求获取数据传给子组件，子组件接收的打印的真实的值却为初始值，如下所示 父组件 子组件 原因的话：加载渲染的时候，请求是一个异步的操作，子组件在拿到数据前就渲染了，子组件没有监控到值得变化 父子组件加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父
记录vue父传子为空案例
lyx1838102537的博客
09-15 659
vue 父传子一直为空, 因为父组件的值是通过axios请求获得，当父组件拿到处理后的值时，子组件钩子函数生命周期已经走完，即便拿到值也不会再次渲染。 经过反复琢磨解决办法如下: 通过v-if，设置一个flag，让子组件在父组件拿到值后再开始渲染。 <trans-popup v-if='show' :isPopupShow="isPopupShow" :accountNoList="accountIdList" ref="transPopup"></trans-popup>
vue数组在浏览器里可以看到值, 但是length为空
m0_46554818的博客
06-07 686
arr数组 length为0, 检查了代码在created 里调用了 this.getEnergyList(); 和 this.initChart(); 问题就在这里, this.initChart用到了getEnergyList里的数据, 造成了数据异步, 把this.initChart(); 放入 this.getEnergyList(); 方法里即可解决问题
Vue中父级异步请求获取数据，向子级传参为空的解决
weixin_54586234的博客
01-14 954
由于是解决为空，如何传值请自行百度 利用watch:{}来监听父级传值的变化，如果父级传的值发生了改变就调用回调函数function重新赋值 watch: { countrydata: function(newVal) { //console.log(newVal, 'CCCCCCC') var reg = /(^[\-0-9][0-9]*(.[0-9]+)?)$/ if (reg.test(newVal)) { this.selectV
vue3及与vue2的区别总结（部分）
m0_67402774的博客
03-09 717
1.生命周期的变化：3.x(上） 2.x（下） 不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化： beforeDestroy --> beforeUnmount destroyed --> unmounted 其他的区别主要在于书写使用的语言上的差别 在ts中使用 class 类组件书写可以 参考 vue-class-component 或者 vue-property-decorator 书写的风格和vue2.0的选项式区别不大。 如果使用js书写代码 则应当使用
（二）Vue本地应用——快速入门Vue
weixin_45189258的博客
07-03 763
目录 前言 一、内容绑定，事件绑定 1. v-text 指令 2. v-html 指令 3. v-on 基础 4.计数器案例 二、显示切换，属性绑定 1.v-show指令 2.v-if指令 3. v-bind指令 4.图片切换案例 三、列表循环，表单元素绑定 1.v-for指令 2. v-on 补充 3. v-model指令 四、小黑记事本 总结 前言 学习了vue基础，已经可以把一个基本的项目跑起来，本章开始学习本地应用，本章核心是用vue开发网页效果...
Vue 父组件通过 prop 传值给子组件 但子组件获取的值为空-解决记录
热门推荐
王清欢的博客
12-06 1万+
01 Bug 描述 笔者基于简化版的 vue-element-admin 前端框架 vue-admin-template 进行二次开发。 开发中遇到需要父组件向子组件传值的情景，笔者使用 Vue 官方文档提供的 通过 Prop 向子组件传递数据 的方法实现父组件向子组件的传值。但是在我的实例中，使用该方法传值，最终子组件获取到的数据为空值。 为了找到 Bug，我回顾了一遍通过 Prop 向子组件传递数据的过程： 02 通过 Prop 向子组件传递数据 笔者使用该方法实现父组件向子组件传值的过程如下： 父组件
vue中props传值给data时-props有值但data却是空的问题
吕大瓜的博客
11-12 1万+
问题 设计vue组件时，常常有这样一个应用场景：父组件通过接口请求回来的数据传给子组件， 然后在子组件内部我们会用一个props来接收，并且将该props赋值给data里面的一个变量（便于我们后期对这个数据操作，如果直接修改props，vue会报错） 这样会有一个问题，就是组件接受到的props是有值的，但是赋给data里面的变量却是空的。 子组件 props: { title: {...
vue传值为空问题
jjy8040的博客
06-18 4591
vue解决组件传值异步问题：https://blog.youkuaiyun.com/qq_15243963/article/details/80134142 vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决 附demo：https://www.jianshu.com/p/4450b63a27fe 由于vue传值时数据会更新，在一些时候传递的值会出现为空的情况，且created生命周期只...
Vue中路由变化、父传子的变量为空
一只前端小菜鸟
04-24 1374
问题一： 在vue中，父组件传递给子组件的数据，我们在挂载后打印它，会得到一个空的值也有可能报错（未定义），但是我们却可以直接渲染到页面上。 那么这是什么原因呢？ 刚开始组件挂载，数据并没有从父组件传递过来，所以mounted打印不出来 之所也页面能渲染，因为vue是数据驱动，当数据实时变更后，页面发生diff算法，会更新视图，所以才可以渲染 那么我们想在mounted或其他地方使用它，...
vue中父组件向子组件传对象，子组件显示为空问题
weixin_43360634的博客
04-02 6187
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常 原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据 解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染 1.父组件 //父组件 <...
在父组件onMounted中获取不到子组件传递来的数据
A5120184120的博客
10-23 562
解决在onMounted中获取不到子组件传递来的数据
vue3中父组件数据通过异步请求得到后传给子组件是为空
hmxxhbjt的博客
04-01 1090
（请求可以写到store中的ts文件，然后在一进入项目时便调用），这种方法适用于以上两种方法无效，并且其他传参方法也无效时使用，毕竟这个方法中更适用于多个页面都有调用该请求的情况。1、使用v-if 来控制子组件是否开始挂载，我们在请求成功之后，所传字段有值时才开始选择挂载子组件。生命周期钩子是同步执行的，而向后端获取数据是异步的，如果在父组件的created中向后端异步获取数据，根据事件循环的顺序，子组件开始创建时是获取不到数据的。2、子组件中用watch更新要使用的数据。
watch监听数组
ziyanCarol的博客
03-11 2836
写功能时，要求页面初始化数据，数据来自接口请求的返回的数组，写在actived中时，数据返回使用methods方法，故数组在actived中未定义，值为undefined，试过updated，mounted，created，都失败，最后想到watch监听，因为获取到的数组值不会变化，所以-可以把watch当做数组初始化之后的首步操作 刚开始真正做项目，这是我目前想到的最好的办法，以后有更好的思路...
vue新增数据时 打印表单内容为空问题
luxurie的小窝
03-13 2095
vue+element-ui打印表单数据为空问题 在做后台管理系统时，我们常常有新增用户或商品类似数据的功能。 因为用了element-ui组件库，所以新增表单在对话框中完成。 今天突发奇想在向后端发起请求前先在控制台console.log一下新增的表单对象，结果发现为空。 可是明明这些数据已经赋值了，下面单独打印表单中任意一条数据，发现也不为空。 最后查阅资料，原来谷歌浏览器打印的对象是...
Vue手写Tree插件实战解析
1. **数据结构**：树形结构通常由一个包含多个子节点的对象数组构成，每个子节点可以有自身的属性（如标题、是否展开等）以及一个包含其子节点的数组。 2. **递归组件**：由于树可能有任意深度，我们需要创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值