vue prop 声明对象数组
时间: 2023-09-01 16:03:53 浏览: 139
在Vue中,我们可以通过使用prop来声明接收一个对象数组。首先,在我们的组件定义中,我们需要在props选项中声明一个相应的属性。
```
props: {
items: {
type: Array, // 声明类型为数组
required: true // 可选项,表示该属性是必需的
}
}
```
上述代码表示我们希望通过名为`items`的prop接收一个数组类型的对象作为参数。此外,我们还设置了`required: true`,表示我们需要传递该属性作为组件的参数。
在使用该组件时,我们可以通过传递一个对象数组给`items`属性来使用它。例如:
```
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
}
}
}
</script>
```
在上述示例中,我们利用`v-for`指令遍历`items`数组,并使用每个对象的`name`属性来显示列表项。此处的`item.id`用作每个列表项的唯一键。
需要注意的是,当我们使用该组件时,必须确保将`items`属性传递给它,否则Vue将会发出一条警告。如果没有传递该属性,可以考虑使用默认值,例如将属性设置为一个空数组`[]`作为默认值。
总结起来,我们可以通过为prop设置为数组类型,接收传入的对象数组,并在组件中进行遍历和展示。
阅读全文