es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo escribir un componente genérico en

31 Jul, 2023 Programación

Tengo un componente Select que acepta un array de opciones. Cada opción puede ser un objeto de cualquier cosa siempre y cuando tenga los siguientes atributos: id y text.

Entonces lo escribí de esta manera:

type SelectOption<t> = {
  id: string | number
  text: string
} & T

Pero no estoy seguro de cómo utilizar esto con defineProps y también defineEmits en el componente.

“`ts
defineProps<{
options: SelectOption<??>
modelValue: SelectOption<??>
}>()

defineEmits<{
(event: 'update:modelValue', SelectOption<??>): void
}>()
“`

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para usar el tipo SelectOption con defineProps y defineEmits, puedes utilizar el siguiente código:

    // Definir las props usando el tipo SelectOption
defineProps<{
  options: SelectOption<{}>[] // Las opciones pueden ser un array de objetos con solo los atributos id y text
  modelValue: SelectOption<{}> // modelValue puede ser cualquier objeto con atributos id y text
}>()

// Definir los emits usando el tipo SelectOption
defineEmits<{
  'update:modelValue': (value: SelectOption<{}>) => void // Emitir el evento update:modelValue con cualquier objeto que tenga atributos id y text
}>()

    En el código anterior, definimos las props y emits utilizando el tipo SelectOption. Para la prop options, especificamos que puede ser un array de objetos con solo los atributos id y text. Para la prop modelValue, especificamos que puede ser cualquier objeto que tenga los atributos id y text.

    Para los emits, definimos el evento update:modelValue para emitir un objeto que tenga los atributos id y text.

    También sería aceptable utilizar {} | undefined en lugar de solo {} como argumento de tipo para SelectOption.

Comments are closed.