子组件取props中的数组
时间: 2024-02-27 16:53:41 浏览: 25
如果你想在子组件中取到父组件传递过来的数组类型的props,你可以使用以下方式:
在父组件中使用子组件时,将要传递的数组类型的props绑定到子组件上:
```html
<template>
<div>
<my-component :myArr="arr"></my-component>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3]
}
}
}
</script>
```
在子组件中,可以使用props接收父组件传递过来的数组类型的数据:
```html
<template>
<div>
<ul>
<li v-for="item in myArr" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
myArr: {
type: Array,
default: () => []
}
}
}
</script>
```
在子组件的props中定义了myArr属性,并且指定了它的类型为数组。在模板中使用v-for遍历myArr中的每一项,展示出来即可。
需要注意的是,props是只读的,子组件不能修改props中的值。如果需要修改,可以在子组件中定义一个data属性,将props中的值赋值给data属性,然后在子组件中修改data属性的值。但是需要注意,这样修改的data属性只是子组件内部的状态,不会影响到父组件的数据。