typescript - 跨组件定义枚举

Question

我正在使用 Vue.js 3.0 和 TypeScript 进行开发。
我想定义一个要在多个组件中使用的枚举。
我应该如何以及在哪里写入文件？
目录

src/
├ components/
│ ├ ParentComponent.vue
│ └ ChildComponent.vue
└ App.vue

子组件.vue

<template>
  <p>{{ color }}</p>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

enum Color {
  red = 1,
  blue
}

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

父组件.vue

<template>
  <div>
    <ChildComponent
      :color="state.color"
    />
  </div>
</template>

<script lang="ts">
import ChildComponent from './ChildComponent.vue'
import { defineComponent, reactive } from 'vue'

// duplicate
enum Color {
  red = 1,
  blue
}

interface State {
  color: Color
}

export default defineComponent({
  components: {
    ChildComponent
  },
  setup () {
    const state = reactive<State>({
      color: Color.red
    }）
    return { state }
  }
})
</script>

Answer 1

您可以在单独的文件中定义和导出枚举，并在不同的文件中导入以使用它。
你把这个文件放在哪里主要取决于你，你想如何构建你的项目。
例如，types.ts src 中的文件文件夹可以定义和导出枚举，如:

export enum Color {
    red = 1,
    blue = 2
}

您可以在任何地方使用枚举，方法是像这样导入它:

import { Color } from '@/types';

这是假设您已将 src 设为别名文件夹到 @在您的 TypeScript 配置中可用 tsconfig.json文件。