vue父组件使用v-for传数据到子组件怎么取值
时间: 2023-05-11 20:02:50 浏览: 110
你可以使用props来接收父组件传递过来的数据,然后在子组件中使用这些数据。具体来说,你可以在父组件中使用v-for指令来遍历数据,然后将每个数据项作为props传递给子组件。在子组件中,你可以通过props来访问这些数据。例如:
在父组件中:
```
<template>
<div>
<child-component v-for="item in items" :data="item" :key="item.id"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
items: [
{ id: 1, name: 'item1' },
{ id: 2, name: 'item2' },
{ id: 3, name: 'item3' }
]
}
}
}
</script>
```
在子组件中:
```
<template>
<div>
<p>{{ data.name }}</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true
}
}
}
</script>
```
这样,你就可以在子组件中访问父组件传递过来的数据了。