vue.js 在父组件给子组件传一个数组，数组中的第一个数是及格线，后面几个是学生成绩，在子组件里接受这个数组，根据数组里的及格线和学生成绩，计算出不及格的人数，并显示在网页里

Vue.js 中，父组件可以通过 `v-bind` 或者 `props` 属性将数据传递给子组件。当你需要从父组件向子组件传递一个包含及格线和成绩的数组时，可以这样做：

首先，在父组件（例如 `ParentComponent.vue`）中定义一个数据属性并传递给子组件：

<template>
  <div>
    <ChildComponent :scores="examScores" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      examScores: [
        60, // 及格线
        80,
        75,
        90,
        55,
      ],
    };
  },
};
</script>

然后，在子组件 (`ChildComponent.vue`) 的 `props` 定义里接收这个数组，并计算不及格人数：

<template>
  <div>
    <p>不及格人数：{{ invalidStudentsCount }}</p>
  </div>
</template>

<script>
export default {
  props: {
    scores: {
      type: Array,
      required: true,
    },
  },
  computed: {
    invalidStudentsCount() {
      let invalidCount = 0;
      for (let i = 1; i < this.scores.length; i++) {
        if (this.scores[i] < this.scores[0]) {
          invalidCount++;
        }
      }
      return invalidCount;
    },
  },
};
</script>

在这个例子中，子组件会通过 `invalidStudentsCount` 计算属性动态地获取不及格的人数，并将其显示出来。