uniapp做小程序。父组件向子组件传数组
时间: 2023-07-19 17:28:46 浏览: 128
父组件向子组件传值(双向数据传输).html
在 uni-app 中,可以通过 props 将数据从父组件传递到子组件。如果您需要将数组传递给子组件,可以按照以下步骤操作:
在父组件中,定义一个数组并将其传递到子组件:
```html
<template>
<div>
<child-component :my-array="myArray"></child-component>
</div>
</template>
<script>
import childComponent from '@/components/child-component'
export default {
components: {
childComponent
},
data () {
return {
myArray: ['apple', 'banana', 'orange']
}
}
}
</script>
```
在子组件中,通过 props 接收传递的数组:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in myArray" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
myArray: {
type: Array,
default: () => []
}
}
}
</script>
```
在子组件中,通过 v-for 遍历数组并展示数组中的每个元素。在本例中,我将数组渲染为无序列表。您可以根据自己的需求来展示数组中的数据。
阅读全文