编写一个Cube组件，入参为num， 要求： 根据代码样例文件（index.vue和Cube.vue）进行修改 在父组件（index.vue）实现输入框，输入或修改数字后自动刷新生成表格 子组件（Cube.vue）中判断参数是否合法（数字且在[1,10]之间），如果不合法，通知父组件，父组件背景变为红色，合法则恢复原来颜色 当num=3时，输出表格效果为： 1 2 3 6 5 4 7 8 9 当num=4时，输出表格效果为： 1 2 3 4 8 7 6 5 9 10 11 12 16 15 14 13 第2，4，6...行反着输出

以下是一个可能的实现：

index.vue：

<template>
  <div :style="{ backgroundColor: bgColor }">
    <label>输入数字：</label>
    <input type="number" v-model="num" @input="updateTable" />
    <table>
      <tbody>
        <tr v-for="(row, i) in table" :key="i">
          <td v-for="(cell, j) in row" :key="j">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Cube from "./Cube.vue";

export default {
  components: {
    Cube,
  },
  data() {
    return {
      num: 3,
      table: [],
      bgColor: "white",
    };
  },
  methods: {
    updateTable() {
      if (this.num < 1 || this.num > 10) {
        this.bgColor = "red";
        return;
      }
      this.bgColor = "white";
      const table = [];
      let count = 1;
      for (let i = 0; i < this.num; i++) {
        const row = [];
        for (let j = 0; j < this.num; j++) {
          row.push(count++);
        }
        if (i % 2 === 1) {
          row.reverse();
        }
        table.push(row);
      }
      this.table = table;
    },
  },
};
</script>

Cube.vue：

<template>
  <div></div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
      required: true,
      validator: (value) => value >= 1 && value <= 10,
    },
  },
  created() {
    if (!this.num) {
      this.$emit("invalid");
    }
  },
};
</script>

这里使用了一个父组件 `index.vue` 和一个子组件 `Cube.vue`。父组件中有一个输入框和一个表格，输入框绑定了 `num` 变量，表格绑定了 `table` 变量和 `bgColor` 变量。当输入框的值改变时，会调用 `updateTable` 方法，该方法会根据输入框的值生成一个二维数组 `table`，并将其绑定到表格上。如果输入框的值不在 [1, 10] 范围内，会将背景色变为红色。

子组件 `Cube.vue` 中只有一个 `num` 属性，用于接收父组件传递过来的数字。在创建时，会检查 `num` 是否合法，如果不合法则触发 `invalid` 事件，通知父组件。

注意到题目中要求每隔一行反着输出，这里使用了一个简单的技巧：在生成每一行时，如果行号是奇数，则将该行反转。