用vue 的子传父父传子随机生成五道数学题

好的，我可以帮你解决这个问题。首先，我们需要定义两个组件：一个父组件和一个子组件。子组件会随机生成五道数学题，并将这些题目传递给父组件。父组件将显示这些题目。

子组件：

<template>
  <div>
    <h2>随机生成五道数学题</h2>
    <ul>
      <li v-for="(question, index) in questions" :key="index">
        {{ question }}
      </li>
    </ul>
    <button @click="generateQuestions">重新生成</button>
  </div>
</template>

<script>
export default {
  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} = ?`;
        questions.push(question);
      }
      this.questions = questions;
      this.$emit('generate', questions);
    },
  },
};
</script>

在子组件中，我们在 `mounted` 生命周期钩子中调用 `generateQuestions` 方法来生成五道随机的数学题。我们使用 `ops` 数组来定义四个运算符：加、减、乘、除。然后我们使用 `Math.random()` 方法来随机选择一个运算符和两个操作数。最后，我们创建一个字符串来表示问题，并将其添加到 `questions` 数组中。我们使用 `$emit` 方法将 `questions` 数组传递给父组件。

父组件：

<template>
  <div>
    <h1>数学题列表</h1>
    <ul>
      <li v-for="(question, index) in questions" :key="index">
        {{ question }}
      </li>
    </ul>
    <child-component @generate="updateQuestions" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      questions: [],
    };
  },
  methods: {
    updateQuestions(questions) {
      this.questions = questions;
    },
  },
};
</script>

在父组件中，我们使用 `ChildComponent` 组件来生成数学题。我们将 `questions` 数组作为 `data` 中的一个属性进行定义。我们使用 `updateQuestions` 方法来更新 `questions` 数组。当子组件生成新的数学题时，它将使用 `emit` 方法调用 `updateQuestions` 方法，并将新的数学题传递给它。

这样，当你在父组件中使用 `<child-component />` 标签时，它将显示五道随机生成的数学题。每当你点击子组件中的重新生成按钮时，它将重新生成五道随机的数学题，并将它们传递给父组件。