vue子组件怎么拿到父组件props传入的数组
时间: 2023-09-19 11:12:45 浏览: 109
在Vue中,子组件可以通过props来接收父组件传递的数据。如果要拿到父组件传入的数组,可以按照以下步骤进行操作:
1. 在子组件的props选项中定义一个与父组件传入的数组相同名称的属性。
2. 在子组件中可以通过this来访问这个属性,即可获取到父组件传入的数组。
下面是一个示例代码:
```vue
// 父组件
<template>
<div>
<child-component :items="items"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
items: [1, 2, 3, 4, 5]
};
}
};
</script>
// 子组件
<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
}
}
};
</script>
```
在上面的示例中,父组件通过props传递了一个名为`items`的数组给子组件。子组件在props选项中定义了同名的属性`items`,然后在模板中使用`v-for`指令遍历这个属性来展示数组元素。
这样,子组件就可以拿到父组件传递的数组了。
阅读全文