如何将父组件数组传递给子组件并在子组件中渲染？

看起来你搞混了父组件传递数据的方式——父组件里的v-for是把单个数组元素传给子组件的，所以子组件接收的tile是单个对象，不是数组，这就是你用tile[0].name没输出的原因！另外你的计算属性里直接修改prop的写法也是错误的，Vue里不能直接修改父组件传来的prop哦。

下面分两种场景给你修正方案：

场景1：让子组件渲染整个数组（符合你的核心需求） #

如果你希望子组件来负责整个数组的渲染逻辑，那父组件应该直接把整个tileMenu数组传给子组件，而不是循环传递单个元素。

修正后的父组件代码 #

<template>
  <div>
    <!-- 直接传递整个数组给子组件 -->
    <TileList :tiles="tileMenu" />
  </div>
</template>

<script>
import TileList from './TileList.vue' // 建议把子组件改名成更语义化的名称
import { ref } from 'vue'

export default {
  components: { TileList },
  setup() {
    const tileMenu = ref([
      { id: 1, name: 'tile1' },
      { id: 2, name: 'tile2' },
    ])
    return { tileMenu }
  }
}
</script>

修正后的子组件（TileList.vue）代码 #

<template>
  <div>
    <!-- 子组件内部循环渲染数组 -->
    <div v-for="tile in tiles" :key="tile.id" class="tile-item">
      {{ tile.name }} {{ getFormattedPoints(tile) }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tiles: {
      required: true,
      type: Array,
      // 可选：添加验证确保数组元素格式正确
      validator: (value) => {
        return value.every(item => typeof item === 'object' && item.id && item.name)
      }
    }
  },
  methods: {
    getFormattedPoints(tile) {
      // 这里写你的格式化逻辑，比如根据tile的属性计算值
      // 示例返回固定值5，你可以改成自己的逻辑
      return 5;
    }
  }
}
</script>

场景2：父组件循环传递单个元素，子组件渲染单个项 #

如果你还是想保留父组件的v-for，那子组件只需要直接访问单个tile对象的属性即可，不要用数组索引：

修正后的子组件代码 #

<template>
  <div> {{ tile.name }} {{ formattedPoints }} </div>
</template>

<script>
export default {
  props: {
    tile: {
      required: true,
      type: Object
    }
  },
  computed: {
    formattedPoints() {
      // 只返回计算后的值，不要修改prop
      return 5;
    }
  }
}
</script>

关键注意点 #

1. 单向数据流：永远不要直接修改父组件传来的prop，子组件如果需要修改数据，应该通过$emit触发父组件的方法来修改。
2. prop类型匹配：确保子组件接收的prop类型和父组件传递的一致，比如传递数组就把prop类型设为Array，传递单个对象就设为Object。

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