用vue 的子传父父传子 子组件有俩个 SubjectItem，FlagItem，随机生成五道数学题

好的，我可以帮你解决这个问题。首先，我们需要定义三个组件：一个父组件和两个子组件。子组件 `SubjectItem` 用来显示数学题目，而子组件 `FlagItem` 用来显示答案是否正确的标志。父组件将随机生成五道数学题，并将题目和答案传递给子组件。

SubjectItem 组件：

<template>
  <li>{{ question }}</li>
</template>

<script>
export default {
  props: {
    question: {
      type: String,
      required: true,
    },
  },
};
</script>

在 `SubjectItem` 组件中，我们只需要显示题目内容。我们使用 `props` 来接收父组件传递的 `question` 属性。

FlagItem 组件：

<template>
  <li>
    <span :class="{'correct': correct, 'incorrect': !correct}">
      {{ correct ? '✔' : '✘' }}
    </span>
  </li>
</template>

<script>
export default {
  props: {
    correct: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

<style>
.correct {
  color: green;
}

.incorrect {
  color: red;
}
</style>

在 `FlagItem` 组件中，我们使用 `props` 来接收父组件传递的 `correct` 属性。我们使用 `correct` 属性来确定答案是否正确，并将其显示为绿色的“✔”或红色的“✘”。

Parent 组件：

<template>
  <div>
    <h1>数学题列表</h1>
    <ul>
      <li v-for="(question, index) in questions" :key="index">
        <SubjectItem :question="question.question" />
        <FlagItem :correct="question.correct" />
      </li>
    </ul>
    <button @click="generateQuestions">重新生成</button>
  </div>
</template>

<script>
import SubjectItem from './SubjectItem.vue';
import FlagItem from './FlagItem.vue';

export default {
  components: {
    SubjectItem,
    FlagItem,
  },
  data() {
    return {
      questions: [],
    };
  },
  mounted() {
    this.generateQuestions();
  },
  methods: {
    generateQuestions() {
      const ops = ['+', '-', '*', '/'];
      const questions = [];
      for (let i = 0; i < 5; i++) {
        const op = ops[Math.floor(Math.random() * 4)];
        const a = Math.floor(Math.random() * 100) + 1;
        const b = Math.floor(Math.random() * 100) + 1;
        let result;
        switch (op) {
          case '+':
            result = a + b;
            break;
          case '-':
            result = a - b;
            break;
          case '*':
            result = a * b;
            break;
          case '/':
            result = a / b;
            break;
        }
        const question = `${a} ${op} ${b} = ?`;
        const correct = Math.random() >= 0.5;
        questions.push({ question, correct });
      }
      this.questions = questions;
    },
  },
};
</script>

在父组件中，我们使用 `SubjectItem` 组件来显示数学题目，使用 `FlagItem` 组件来显示答案是否正确的标志。我们将 `questions` 数组作为 `data` 中的一个属性进行定义。我们使用 `generateQuestions` 方法来生成五道随机的数学题，并将它们添加到 `questions` 数组中。我们使用 `v-for` 指令来循环遍历 `questions` 数组，并将每个题目传递给 `SubjectItem` 组件，将每个答案传递给 `FlagItem` 组件。

当你在父组件中点击重新生成按钮时，它将重新生成五道随机的数学题，并将它们传递给子组件。每个题目的答案都是随机生成的。