uniapp自定义组件 v-for取item的时候少了对象参数
时间: 2024-05-01 17:22:25 浏览: 79
微信小程序uniapp日历组件,可以自定义文案,可以上下滑动选择日期
5星 · 资源好评率100%
在uniapp中使用自定义组件时,可以通过`props`属性传递数据给组件。如果在`v-for`循环中使用自定义组件,可以将`v-for`的当前项作为参数传递给组件。
例如,在父组件中使用`v-for`循环渲染一个自定义组件:
```html
<template>
<div>
<custom-component v-for="(item, index) in itemList" :key="index" :item="item"></custom-component>
</div>
</template>
```
在自定义组件中,可以通过`props`属性接收父组件传递的参数。在这个例子中,可以定义一个`props`属性来接收父组件传递的`item`参数:
```html
<template>
<div>
<p>{{ item }}</p>
</div>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true
}
}
}
</script>
```
在这个例子中,`item`是一个必需的`props`属性,它的类型是`Object`。父组件在使用自定义组件时,需要传递一个包含`item`数据的对象。例如:
```html
<template>
<div>
<custom-component v-for="(item, index) in itemList" :key="index" :item="{name: item.name, age: item.age}"></custom-component>
</div>
</template>
```
在这个例子中,父组件将`item`对象中的`name`和`age`属性传递给自定义组件。在自定义组件中,可以使用`item.name`和`item.age`来访问这些属性的值。
阅读全文