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

【问题标题】：How to expect and pass in enum as a component property?如何期望并将枚举作为组件属性传递？
【发布时间】：2021-11-27 10:11:39
【问题描述】：

我使用 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 中，枚举似乎是无效的道具类型

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

【问题讨论】：

请在任何代码和框中提供最小可复制示例

标签： javascript typescript vue.js vuejs3

【解决方案1】：

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

应该是：

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

【讨论】：

我必须如何在 Home.vue 文件中使用它？将其作为道具传递？
您需要在设置函数中将其暴露给模板return { Color }。

【解决方案2】：

尝试使用 PropType 注释属性。对象作为 PropType

这里是用于注释属性的 VueJS 3 文档：https://v3.vuejs.org/guide/typescript-support.html#annotating-return-types

【讨论】：