跨组件的枚举定义

Question

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

\n

目录

\n

src/\n\xe2\x94\x9c components/\n\xe2\x94\x82 \xe2\x94\x9c ParentComponent.vue\n\xe2\x94\x82 \xe2\x94\x94 ChildComponent.vue\n\xe2\x94\x94 App.vue\n

\n

子组件.vue

\n

<template>\n  <p>{{ color }}</p>\n</template>\n\n<script lang="ts">\nimport { defineComponent, PropType } from 'vue'\n\nenum Color {\n  red = 1,\n  blue\n}\n\nexport default defineComponent({\n  props: {\n    color: { type: Color, required: true }\n  }\n})\n</script>\n

\n

父组件.vue

\n

<template>\n  <div>\n    <ChildComponent\n      :color="state.color"\n    />\n  </div>\n</template>\n\n<script lang="ts">\nimport ChildComponent from './ChildComponent.vue'\nimport { defineComponent, reactive } from 'vue'\n\n// duplicate\nenum Color {\n  red = 1,\n  blue\n}\n\ninterface State {\n  color: Color\n}\n\nexport default defineComponent({\n  components: {\n    ChildComponent\n  },\n  setup () {\n    const state = reactive<State>({\n      color: Color.red\n    }\xef\xbc\x89\n    return { state }\n  }\n})\n</script>\n

\n

Answer 1

您可以在单独的文件中定义和导出枚举，然后将其导入到不同的文件中以使用它。您将该文件放在哪里主要取决于您想要如何构建项目。

例如，文件夹types.ts中的文件src可以定义和导出枚举，如下所示：

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

您可以通过导入来在任何地方使用枚举，如下所示：

import { Color } from '@/types';

这是假设您已在文件中提供的 TypeScript 配置中src为该文件夹起了别名。@tsconfig.json