如何期望并传入枚举作为组件属性？

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>

不幸的是出现了几个问题：

• Color在 Home.vue 中，虽然我尝试在模板中使用它，但导入的未使用
• 在 ColorDisplay.vue 中，枚举似乎是无效的 prop 类型

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

Answer 1

组件属性type值仅限于内置构造函数和自定义类。TS 枚举不是类，而是具有特定类型的对象，不能按原样使用type.

很可能应该是：

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