javascript - 如何期望并将枚举作为组件属性传递？

Question

我使用 TypeScript 创建了一个 Vue 3 应用程序。在 src 文件夹中，我创建了一个新的枚举 color.ts

enum Color {
    Red,
    Blue
}

export default Color;

我创建了一个组件 ColorDisplay.vue

<template>
  <div>
    {{ color }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Color from "../color";

export default defineComponent({
  props: {
      color: {
          type: Color,
          required: true
      }
  }
});
</script>

并将 Home.vue 文件修改为

<template>
  <div>
    <color-display :color="Color.Red" />
    <color-display :color="Color.Blue" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ColorDisplay from "../components/ColorDisplay.vue";
import Color from "../color";

export default defineComponent({
  components: {
    'color-display': ColorDisplay,
  }
});
</script>

不幸的是，出现了几个问题:

• 在 Home.vue 中，导入的 Color 未使用，尽管我试图在模板中使用它
• 在 ColorDisplay.vue 中，枚举似乎是无效的 Prop 类型

有人介意告诉我如何创建一个枚举，将其作为组件属性并将其传递给组件吗？

Answer 1

Component prop type 值仅限于内置构造函数和自定义类。 TS 枚举不是类，而是具有特定类型的对象，不能与 type 一起使用。

应该是这样的:

  color: {
      type: Number as PropType<Color>,
      required: true
  }