父组件向子组件传递数组等引用类型数据时有时传递不过去的问题

最新推荐文章于 2024-05-02 17:10:35 发布
最新推荐文章于 2024-05-02 17:10:35 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34958326/article/details/110562926
版权

父组件向子组件传递数据时，由于是异步方式，可能父组件的数组数据还没加载完时就向子组件传递数据了，结果显而易见，子组件接收的数据为空

解决方式：监听+判断的形式

父组件传递

XXXoptions是 数组数据，判断数组长度是否大于0，来判断父组件的数组有没有加载成功，加载成功再向子组件传递数据

子组件：

 接收父组件的数据

data中定义一个变量接收数组 

监听数组 

 

此时，子组件就能完整的接收父组件传递的值 

 

记录学习日常
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue相关面试题
龚珂心的博客
10-26 278
vue篇 ### 一、vue组件 父子、子父 、兄弟通信 父传递子 在父组件中给子组件标签上绑定一个属性，属性上挂在需要传递的值 在子组件通过peops：[“自定义属性名”]来接收数据 子传递父 （1）在父组件中给子组件标签绑定一个自定义事件，给这个事件 挂载需要调用的方法 （2）在子组件的方法通过this.$emit(’自定义事件名‘)来调用这个方法 兄弟组件通信 （1）创建一个空的vue实例BUS （2）通过BUS.$emit（‘事件名‘）传到空的vue实例中 （3）通过BUS.$on(
vue父组件传递props异步数据到子组件遇到的问题
weixin_44433499的博客
03-09 989
状况1： 　父组件parent.vue // asyncData为异步获取的数据，想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from '../demo/children.vue' export default { data
vue父组件为子组件传值传不过去？vue为数组传值，不能直接用等于的方式，要用循环加push的方式...
weixin_33843409的博客
10-31 1155
父组件为子组件传值不成功，子组件拿不到值，不能直接赋值，要用循环加push的方式赋值。 转载于:https://www.cnblogs.com/web-aqin/p/9881505.html
vue中父组件给子组件传递数据失败的问题
最新发布
weixin_69338588的博客
05-02 382
在vue2中，父组件给子组件传递数据，子组件通过props来接收。此时只需要给proList加个类型判断即可。此时针对proList会报错。页面也可以正常渲染出来。
vue 父组件与子组件传递参数失败问题
chenjun1992的博客
06-17 2131
今天写博客获取评论模块，需要从父组件向子组件传递topicId，但评论一直不显示 子组件： export default { name: "CommentView", prop: ['topicId'], components: { AddComment }, data() { return { comments: [] }; }, created() { this.fetchComment() }, methods: { f
vue element 父传子,第一次传不过去
u013170178的博客
04-22 1647
父页面：A 子组件:B 子组件方法：init 传值：id 相关代码描述： 进入A界面，点击调用按钮，调用B组件里的方法init()（B组件相当于是一个弹窗）， 引用B组件代码 A界面调用B组件inti() 的方法 B组件中接收父组件传来的eventId B组件中的init()方法 问题： 进入A界面，点击调用按钮，发现A界面的id并未传过去。 关掉B组件界面。再次在A界调用B组件，发现值传过去了。 刷新A界面，再次尝试，发现结果一样。就是说刚进界面的第一次，值没传过
解决vue 父组件向子组件传值,子组件接收不到问题
liaoxianhua888的博客
09-09 5217
vue 父组件向子组件传值,子组件接收不到问题
微信小程序父组件传递子组件遇到的失效问题
m0_47872652的博客
10-20 2115
帮你解决微信小程序的父组件传递子组件问题。这里是我自己遇到的所有问题。希望能帮到大家
vue父组件向子组件(props)传递数据的方法
11-29
在组件化的开发模式下，父组件向子组件传递数据是常见的操作，通常我们通过`props`来实现这一功能。Vue提供了多种组件间通信的方式，如`props`、事件总线、Vuex状态管理等，但在这篇文章中，我们将专注于讨论如何...
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue父组件向子组件传递多个数据的实例
08-27
在 Vue 中，父组件向子组件传递多个数据是非常常见的场景。本文将通过一个实例，讲解如何在 Vue 中实现父组件向子组件传递多个数据。 首先，我们需要了解在 Vue 中传递数据的两种方式：静态数据传递和动态数据传递...
解决Vue中 父子传值 数据丢失问题
12-10
在Vue中，父子组件传值，子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中，一种是通过对象形式，一种是通过数组形式，通过数组形式接收多个数据时用逗号隔开即可。比如：props：['a','b']。 需要注意的是在子组件中 接收父组件的数据参数，必须和父组件传递时的 参数一致，上图中的 questionList 这种情况下会出现这么一个情况，刷新页面之后子组件接收的父组件数据会丢失，我们可以在watch里面去监听一下数据的变化。 重新对数据进行想要的处理，之
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
弹窗的可见性由`dialogVisible`属性控制，该属性从父组件传递给子组件。当尝试在子组件中关闭弹窗时，由于Vue的单向数据流规则，直接在子组件中修改`dialogVisible`会导致错误。 为了解决这个问题，Vue提供了一个`...
vue中如何让子组件修改父组件数据
08-27
在子组件中，我们可以拷贝一份父组件传递过来的数据副本，以便在子组件中进行修改。 ``` // 在子组件中 export default { props: { checkModalGroup: { type: Array, default: [], required: false, } }, ...
vue 父子组件传值及不生效问题
sky_sunshine_x的博客
09-02 3706
1.父组件 <!--顶部--> <topHead :parent="testdata" v-if="testdata.length>0"></topHead> data() { return { testdata:[], }} methods: { //获取信息 getBannerList(){ getHone().then(response => { this.testda
vue父给子传值，传不过来，可以用watch
renlihui8617的博客
07-15 486
vue父给子传值，传不过来，可以用watch
Vue父子组件prop传值时的问题
一个不会射日的后羿
09-13 1332
Vue父子组件prop传值时的问题
vue：向组件中传入boolean的属性不生效
cxy的博客
03-17 6263
//原写法 <page-head :title="lang.mainTitle" :showHome="false" :showSearch="false"></page-head> //改正之后的写法 <page-head :title="lang.mainTitle" :show-home="false" :show-search="false"></...
uni-app中遇见的坑，使用v-for循环数组，绑定方法传值，将数组中的item用事件传值不成功，看如何解决
weixin_70811193的博客
11-20 2039
uni-app中遇见的坑，使用v-for循环数组，绑定方法传值，将数组中的item用事件传值不成功，看如何解决
typescript 初始化一个空数组
04-07
好的，关于typescript初始化一个空数组的问题，可以使用以下代码： ``` let myArray: any[] = []; ``` 这是一种常见的方式来声明和初始化一个空数组。在这里，`myArray` 是一个任意类型的数组，因为我们在声明时没有指定数组元素的类型。然后我们将一个空数组分配给该变量，这样就可以开始向其中添加元素了。 有没有讲得清楚呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值