在vue中,制作一个父组件传递一个动态数组给子组件,子 组件遍历接收过来的数组中的每一个数值,并打印出最大值的html文件
时间: 2024-05-02 20:18:01 浏览: 96
父组件的代码如下:
```
<template>
<div>
<child :numbers="numbers"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
numbers: [5, 8, 3, 9, 2, 1, 7, 6, 4]
}
}
}
</script>
```
子组件的代码如下:
```
<template>
<div>
<p v-for="number in numbers" :key="number">{{ number }}</p>
<p>最大值为:{{ max }}</p>
</div>
</template>
<script>
export default {
props: {
numbers: {
type: Array,
default: []
}
},
computed: {
max() {
return Math.max(...this.numbers)
}
}
}
</script>
```
在父组件中,我们将 numbers 数组传递给了子组件,并绑定在子组件的 numbers 属性上。
在子组件中,我们使用 v-for 指令遍历接收过来的数组中的每一个数值,并打印出来。同时,我们使用 computed 计算属性来获取数组中的最大值,并将其展示在页面上。
这样,我们就实现了一个父组件传递动态数组给子组件,并打印出最大值的功能。
阅读全文