uni-app v-for和组件参数传递写在同一行子组件拿不到值

uni-app v-for和组件参数传递写在同一行子组件拿不到值

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

<goods-info v-for="i in list" :key="i.id" :info="i"/>

预期结果：

goods-info内info正常接收


### 实际结果：

为undefined

bug描述：

<template v-for="i in list">  
    <goods-info :key="i.id" :info="i"/>  
</template>

如果不这么写 goods-info里面info是undefined


更多关于uni-app v-for和组件参数传递写在同一行子组件拿不到值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

14:51:32.497 cid unmatched [object Object] at view.umd.min.js:1 14:51:32.529 TypeError: Invalid attempt to destructure non-iterable instance. 14:51:32.560 In order to be iterable, non-array objects must have a Symbol.iterator method. at view.umd.min.js:1

更多关于uni-app v-for和组件参数传递写在同一行子组件拿不到值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，将 v-for 和组件参数传递写在同一行时子组件无法获取到值，通常是因为 Vue 的渲染机制导致的。当 v-for 和组件属性绑定写在同一行时，Vue 在解析模板时可能无法正确识别属性绑定的作用域，尤其是在某些编译环境下（如 HBuilderX 的模板编译方式）。

原因分析：

  1. 模板编译差异：uni-app 基于 Vue 2，但部分平台（如小程序）的模板编译可能对 v-for 和属性绑定的结合写法支持不完整，导致子组件接收不到数据。
  2. 作用域隔离：在某些情况下，v-for 循环的变量 i 可能无法在属性绑定中正确传递到子组件，尤其是当编译工具链处理模板时未完全遵循 Vue 的规范。

解决方案：

  1. 使用 <template> 包裹（如你已发现）：
    <template v-for="i in list">
    <goods-info :key="i.id" :info="i"/>
</template>
回到顶部