在vue中,完成父子组件通信,作用:父组件传递一个动态数组给子组件,子组件遍历接收过来的数组中的每一个数值,并打印出最大值的html代码
时间: 2024-05-02 14:18:01 浏览: 93
父组件代码:
```
<template>
<div>
<Child :data="numbers" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
data() {
return {
numbers: [1, 5, 3, 9, 2],
};
},
};
</script>
```
子组件代码:
```
<template>
<div>
<p>数组最大值为:{{ max }}</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true,
},
},
computed: {
max() {
return Math.max(...this.data);
},
},
};
</script>
```
父组件中使用了子组件,并将动态数组`numbers`作为`Child`组件的`data`属性进行传递。子组件中使用了计算属性`max`来获取数组的最大值,并在模板中将其打印出来。
阅读全文