Vue父组件向子组件传递JSON数据列表后循环不渲染问题

你的问题出在两个关键地方：

• 父组件传递的prop名称是productsData，但子组件模板里用的是productData，变量名完全不匹配
• 子组件没有显式声明接收props，Vue不会自动把父组件传的属性挂载到子组件的作用域中

直接修改子组件代码就能解决问题，以下是两种可选的修复方式：

方式一：保持父组件传递名称，修改子组件 #

<template>
  <!-- 使用和父组件传递一致的变量名 -->
  <div v-for="(product, index) in productsData" :key="index">{{product}}</div>
</template>

<script>
export default {
  // 声明接收父组件传递的props
  props: {
    productsData: {
      type: Array, // 对应你的JSON数组类型
      required: true
    }
  }
}
</script>

方式二：统一变量名为productData #

父组件模板修改： #

<ChildComponent :productData="productData" />

子组件修改： #

<template>
  <div v-for="(product, index) in productData" :key="index">{{product}}</div>
</template>

<script>
export default {
  props: {
    productData: {
      type: Array,
      required: true
    }
  }
}
</script>

核心逻辑就是：父组件传递的prop名称必须和子组件声明的props名称完全一致，且子组件必须显式声明要接收的props，才能在模板或组件逻辑中使用该数据。

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