vue v-for动态传值给子组件

可以通过在父组件中使用 v-for 循环来动态传递数据给子组件。具体实现方式如下：

1. 在父组件中使用 v-for 循环遍历数据，并将数据传递给子组件：

<template>
  <div>
    <child-component v-for="(item, index) in itemList" :key="index" :item="item"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      itemList: [
        { name: 'apple', price: 10 },
        { name: 'banana', price: 5 },
        { name: 'orange', price: 8 }
      ]
    }
  }
}
</script>

2. 在子组件中通过 props 接收父组件传递的数据：

<template>
  <div>
    <p>{{ item.name }} - {{ item.price }}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>