Блог

Главная - Вопросы по программированию - Как ожидать и передавать перечисление в качестве свойства компонента?

Как ожидать и передавать перечисление в качестве свойства компонента?

#javascript #typescript #vue.js #vuejs3

Вопрос:

Я создал приложение Vue 3, используя TypeScript. Внутри папки src я создал новый цвет перечисления.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 перечисление кажется недопустимым типом реквизита

введите описание изображения здесь

Не мог бы кто-нибудь рассказать мне, как создать перечисление, ожидать его как свойство компонента и передать его компонентам?

Комментарии:

1. пожалуйста, приведите минимальный воспроизводимый пример в любом коде и коробке

Ответ №1:

type Значение реквизита компонента ограничено встроенными конструкторами и пользовательскими классами. Перечисления TS являются не классами, а объектами с определенными типами и не могут использоваться как есть type .

Скорее всего, так и должно быть:

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

Комментарии:

1. и как я должен использовать его внутри файла Home.vue? Чтобы выдать это за реквизит?

2. Вам нужно предоставить его шаблону в функции настройки, return { Color } .

Ответ №2:

Попробуйте аннотировать свойства с помощью propType. Объект как propType

Вот документация VueJS 3 для аннотирования свойств: https://v3.vuejs.org/guide/typescript-support.html#annotating-return-types

Метки: