Vue CLI中Props写法疑问：为何两种组件传参方式效果不同？

这两种写法本质完全不同，并非等价的传参方式，无效写法的问题出在组件职责不匹配和语法错误上：

1. 两种写法的核心区别 #

• 有效代码：给<mostrar-productos>组件传递了完整的数组listaPlantas，组件自身负责循环渲染所有产品（组件的props定义里应该包含listaPlantas这个数组类型属性）。
• 无效代码：用v-for循环创建了多个<mostrar-productos>实例，每个实例传递单个产品的属性，但存在两个关键问题：

2. 无效写法的具体问题 #

（1）Props定义不匹配 #

如果你的<mostrar-productos>组件原本只定义了listaPlantas这个props（比如props: ['listaPlantas']），那么传递的id、name等单个属性组件根本无法识别——组件只会接收它定义过的props，未定义的属性会被忽略，自然不会生效。

（2）事件回调参数错误 #

事件绑定@restar-products="restProd(id)"里的id是未定义变量。在v-for的作用域中，单个产品的属性需要通过循环变量planta访问，应写成restProd(planta.id)，否则Vue会去当前父组件的data/props中查找id，找不到会触发报错，进而影响组件渲染。

3. 修正方案 #

若想循环渲染单个产品组件 #

修改<mostrar-productos>的props定义，让它接收单个产品的属性：

// MostrarProductos.vue
export default {
  name: 'MostrarProductos',
  props: ['id', 'name', 'stock', 'price']
}

同时修正事件绑定的参数：

<mostrar-productos v-for="planta in listaPlantas" 
  :key="planta.id"
  :id="planta.id"
  :name="planta.name"
  :stock="planta.stock"
  :price="planta.price"
  @restar-products="restProd(planta.id)">
</mostrar-productos>

此时组件内部需渲染单个产品的UI，而非再循环数组。

若想保持“传数组给列表组件”的写法 #

保留有效代码的写法，确保<mostrar-productos>组件的props定义包含listaPlantas，并在组件内部通过v-for循环渲染每个产品：

<!-- MostrarProductos.vue内部 -->
<div v-for="planta in listaPlantas" :key="planta.id">
  <!-- 单个产品的UI结构 -->
</div>

内容的提问来源于stack exchange，提问作者Elisaniza