小程序第七讲 repeat中使用组件，组件中无法取到props传入的值

小程序Repeat组件传值攻略
最新推荐文章于 2025-09-19 14:58:16 发布
原创 最新推荐文章于 2025-09-19 14:58:16 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#repeat #组件 #props #数值

本文针对初学者在使用wepy框架开发小程序时，遇到的repeat循环中子组件无法获取父组件传值的问题，提供了两种解决方案：静态传值转换为字符串类型及传入绑定数值的对象形式，帮助读者有效解决数据传递难题。

小程序第七讲 repeat中使用组件，组件中无法取到props传入的值

写在前面的话

上一篇我们讲到了代码格式化导致布局显示异常这个问题的解决方式有两种,这一章我们主要讲解如何搞定组件间传值取不到数据的问题。

问题出现的场景

对于这个场景对于初学wepy的小伙伴们来说肯定会遇到的，比如在repeat里面循环绑定一个数值类型的变量传递给子组件，子组件在接收这个数值的时候出现取不到的情况，这种情况仅限在使用的时候，数值绑定却没有问题

下面提供两种解决方案
1.静态传值只接收字符串类型
2.传入含有绑定数值的对象

静态传值只接收字符串类型

上次我们讲组件传值的时候提到过静态传值和动态传值

静态传值

那么如果你传入的是Number类型的，只能进行数值绑定，是无法在子组件中使用变量的。
所以需要在父组件中先对类型进行转换变成String类型的

传入含有绑定数值的对象

动态传值

你需要把你的id包在一个对象里面进行传递
比如你要传id
那么你就把它定义为{id:“xx”}这样你就可以在子组件中进行使用啦

结束语

喜欢加个关注支持一下后续会有更多更新内容

鸿蒙next开发实战：Repeat子组件复用规范详解
wewqeqwrqw的博客
09-12 1453
Repeat组件的virtualScroll场景不完全兼容V1装饰器，使用V1装饰器存在渲染异常，不建议开发者同时使用V1装饰器和virtualScroll场景。
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 1089
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
解决vue中父组件通过props向子组件传递数据，子组件接收不到
热门推荐
CYL_2021的博客
05-04 1万+
问题：父组件在挂载时向后端发起请求获取数据，然后将获取到的数据传递给子组件，子组件想要在挂载时获取数据，获取不到
鸿蒙应用开发——Repeat组件的使用
最新发布
高心星的专栏
09-19 496
摘要： Repeat是基于数组数据的循环渲染组件，需与List等滚动容器配合使用，支持懒加载和节点复用。其核心特性包括：仅渲染可视区域及预加载节点（默认1个，可调整）；子组件需匹配容器类型（如List中需为ListItem）；支持通过.template()定义多模板并根据条件切换。案例展示了全量加载与懒加载（virtualScroll+cachedCount）的性能对比，以及多模板按索引动态渲染的效果。注意事项包括：避免混用V1装饰器、不支持动画、单容器内仅允许一个Repeat等。通过合理配置可显著提升长列
获取不到props中的值
Lin_Zc的博客
05-13 2129
子组件中，在created跟mounted钩子中获取不到props中某个属性的值 正常来说，在created钩子中，数据就已经全部初始化完成，不会获取不到，而mounted钩子更是在created钩子执行之后，那么造成props中某个属性获取不到的原因可能是，父组件传入的值是异步请求得到的值，使得子组件创建完成后值才传进来，那么就造成在created跟mounted钩子中获取不到props值的情况。 解决方法： 1.使用watch监听数据，在数据发生更新之后进行数据操作 2.在子组件上使用v-if条件判断，
React 开发实战（一）- Repeat 组件
weixin_34018202的博客
09-29 138
前言 最近在写一个面向 React 初学者的系列教程玩转 React，内容对有 React 开发经验的同学来说可能太过于基础和啰嗦，不太感兴趣。所以我打算同时开始另外一个系列文章《React 开发实战》。该系列主要面向有 React 开发经验的同学，更侧重 React 实战，每一篇文章会跟大家一起开发一个 React 组件或者一个简单有趣...
vue uni-app 开发 微信小程序易犯错误集锦--子组件在父组件内不显示，props不起作用
小哈力----一个小前端工程师
02-03 1888
vue uni-app 开发 微信小程序易犯错误集锦--子组件在父组件内不显示，props不起作用，从其他页面复制组件到新页面后，组件不显示
UI组件库设计全解析：从设计到实现，面试中的考察要点
[UI组件库设计全解析：从设计到实现，面试中的考察要点](https://opengraph.githubassets.com/c1be6921a292062bb2ba2e277ff8716537ac0ed96afbde1ca4e50b7ef76f5dc7/Semantic-Org/Semantic-UI) # 1. UI组件库设计概述...
小程序3D无缝轮播非swiper
weixin_44387746的博客
06-11 511
css .mod{ box-sizing: border-box; display: flex; justify-content: center; flex-direction: column; align-items: center; background-repeat: no-repeat; } .nav{ display: flex; justify-content: space-between; align-items: center; } .flex{ di
taro父组件向子组件传递数据时，props无效
weixin_30734435的博客
04-09 1111
需要加入defaultProps。具体原因不明 转载于:https://www.cnblogs.com/yangjianyong/p/10676078.html
vue3，父组件通过props传递异步数据，子组件接收不到问题
shsyzhzhgn的博客
04-23 5611
在父子组件传值时会遇到传的值是异步请求的数据，从而可能导致一些问题。父组件中发起请求拿到数据，将数据传给子组件，子组件onMounted生命周期却接收不到值（或者说只接收了父组件定义的初始值）。 主要是因为父子组件的生命周期：思路很简单，就是初始还没获取到异步数据的时候，不让组件渲染，等拿到的时候再渲染组件。通过v-if控制子组件渲染，等拿到数据的时子组件就会渲染。可以认为是改变了父子组件的生命周期。但是这种方式有一个小问题，就是最终效果会显得子组件有些延迟才出现效果。因为异步数据是从后端的接口获取的，如
解决vue props 拿不到值的问题
10-18
今天小编就为大家分享一篇解决vue props 拿不到值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp小程序props传值，对象方法丢失
weixin_42776027的博客
09-01 2028
如果包含function属性则会被忽略掉 主要原因 uniapp props实现采用了JSON.parse(JSON.stringify(ret))，导致this中的data中会识别到对象如果包含function，会直接丢失到该属性。
[uniapp]uniapp转为微信小程序中出现props传值问题
weixin_61972561的博客
10-11 1033
点击卡片列表跳到编辑页面,编辑页引用表单，编辑页（父级）通过props传值给表单页【运行到H5正常获取所需属性值】，但是在微信小程序里props只能获取编辑页data里的初始值。='{}'"用于处理微信小程序组件传值问题 -->判断当内容不为空时就传props值。
整理使用wepy微信小程序的坑之repeat循环遍历组件，传参bug
huangtian615的博客
04-27 4359
使用wepy有一段时间了，期间没遇到什么明显的坑，我一度觉得腾讯开发的wepy就是比mpvue好，写的贼爽快，具体的优点我就不累赘叙述。 但是一旦遇到坑，那就是爆炸的，现在开始总结遇到的坑。 repeat循环遍历组件，传参bug。 在wepy中组件循环只能用repeat大家都知道，但是当你写好一个组件，全局到处都用得到的时候，你肯定非常爽快，但是一旦循环这个组件，你就发现传参的bug。...
微信小程序组件传值
weixin_51170516的博客
03-11 870
父组件给子组件传值 1、父组件传值： <List workList="sss"></List> 2、子组件接收用js：(properties相当于vue中的props) Component({ properties: { workList: { type: String, value: '' } }, }) 子组件页面上可以直接用： <view>{{workList}}</view> 子组件给父组件传值 子
vue3小程序路由传参用defineprops接收参数不是onload
shenhaiyuii的博客
09-14 1401
在小程序中，使用路由传参时，可以通过 URL 参数或通过路由参数传递数据。这些参数可以在页面的生命周期方法中（例如。是 Vue 3 Composition API 提供的一种方式，用于定义和接收组件的属性。对于小程序开发中使用 Vue 3 的情况，传递路由参数与组件内部的属性传递是不同的。然而，在 Vue 3 中，页面和组件的生命周期钩子（例如。以下是一个示例，展示了如何在 Vue 3 + 小程序开发中使用。在 Vue 3 + 小程序开发中，可以使用。来接收从父组件传递过来的参数，而不是使用。
（个人笔记，非教程）小程序page背景渐变时，颜色出现repeat现象时 解决
qq_44408123的博客
06-28 390
设置 background-size: 100% 4000rpx; 设置背景色的高度超过视图
[微信小程序]如何在repeat循环中修改某元素的样式及内容
qq_38136543的博客
11-27 1106
如何在repeat循环中修改某元素的样式及内容 repeat是wepy框架下用于循环页面的标签，它有四个重要的属性：for、index、key、item。其中，对于修改其中元素的重要属性就是index。 示例： &amp;lt;repeat for=&quot;{{list}}&quot; index=&quot;index&quot; key=&quot;index&quot; item=&quot;item&quot;&am
通过props传入ref([])的值，如何在子组件中使用该数组中的值？
08-16
在 Vue 和 React 中，组件之间的通信通常通过 `props` 传递数据。当一个数组通过 `props` 传递给子组件时，子组件可以通过 `props` 访问该数组的具体值。然而，当数组通过 `ref` 包装后传递时，子组件需要解包 `ref` 才能访问其内部值。 --- ### Vue 中访问通过 props 传入的 ref 数组 在 Vue 3 中，如果父组件通过 `ref` 包装数组并作为 `props` 传入子组件，子组件需要使用 `toRefs` 或直接访问 `.value` 来获取数组的实际值。这是由于 `ref` 是一个带有 `.value` 属性的响应式对象。 #### 示例代码 ```vue <!-- 父组件 --> <template> <ChildComponent :items="items" /> </template> <script setup> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' const items = ref([1, 2, 3]) </script> ``` ```vue <!-- 子组件 --> <template> <div v-for="item in items" :key="item">{{ item }}</div> </template> <script setup> const props = defineProps({ items: { type: Array, required: true } }) </script> ``` 在此示例中，`items` 是一个 `ref` 包装的数组。由于 Vue 3 的响应式系统会自动解包 `ref`，因此在子组件中可以直接使用 `props.items` 访问其值。 --- ### React 中访问通过 props 传入的 ref 数组 在 React 中，`ref` 通常用于引用 DOM 元素或类组件实例。如果需要通过 `props` 传递一个数组并通过 `ref` 包裹，通常需要手动解包。React 中的 `ref` 通常不会自动解包，因此需要显式访问 `.current` 属性。 #### 示例代码 ```jsx // 父组件 import React, { useRef } from 'react' import ChildComponent from './ChildComponent' function ParentComponent() { const itemsRef = useRef([1, 2, 3]) return <ChildComponent itemsRef={itemsRef} /> } ``` ```jsx // 子组件 import React from 'react' function ChildComponent({ itemsRef }) { return ( <div> {itemsRef.current.map((item, index) => ( <div key={index}>{item}</div> ))} </div> ) } ``` 在此示例中，`itemsRef` 是一个通过 `useRef` 创建的 `ref` 对象，子组件通过访问 `itemsRef.current` 获取数组的实际值。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值