vue 父子组件传数组
时间: 2023-07-22 15:25:21 浏览: 108
vue父子组件传值案例
在 Vue 中,父组件可以向子组件传递数组类型的数据,同样也是通过 `props` 属性实现。以下是一个简单的示例:
父组件:
```html
<template>
<div>
<child-component :list="parentList"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentList: ['张三', '李四', '王五']
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: Array
}
}
</script>
```
在上面的代码中,父组件通过 `:list="parentList"` 的方式向子组件传递了一个名为 `list` 的数组类型属性,子组件则通过 `props` 属性中声明的 `list` 接收了这个属性,并在模板中使用 `v-for` 指令渲染出了数组中的每一个元素。
阅读全文