vue父组件传给子组件的数据为集合,子组件如何取集合里的数据
时间: 2023-09-15 12:17:52 浏览: 38
在 Vue 父组件传递集合给子组件时,可以使用 props 将集合作为子组件的属性传递进去,然后在子组件中通过访问该属性来获取集合数据。具体步骤如下:
1. 在父组件中定义集合数据并将其作为 props 传递给子组件:
```html
<template>
<div>
<child-component :list="myList"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
myList: ['item1', 'item2', 'item3']
}
}
}
</script>
```
2. 在子组件中声明 props 并通过 `this.$props` 访问集合数据:
```html
<template>
<div>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
mounted() {
console.log(this.$props.list); // 输出: ['item1', 'item2', 'item3']
}
}
</script>
```
在上面的例子中,我们定义了一个名为 `myList` 的集合,并将其作为 props 传递给名为 `child-component` 的子组件。在子组件中,我们声明了一个名为 `list` 的 props,它的类型为数组,并且在模板中使用 `v-for` 指令遍历集合并渲染出每个元素。同时,在 `mounted` 钩子函数中,我们使用 `this.$props.list` 来访问集合数据。