0Pricing
Vue Academy · Lección

defineProps y defineEmits

Props tipadas con defineProps (), defineEmits () y withDefaults() para valores predeterminados.

defineProps y defineEmits es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Comunicación entre componentes

Los componentes reciben datos mediante props y envían mensajes al componente padre mediante events. En <script setup>, se declaran con las macros defineProps y defineEmits.

defineProps: la forma basada en tiempo de ejecución

Puede declarar props con un objeto de tiempo de ejecución, igual que en la Options API. Funciona tanto en JS como en TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps con un genérico de TypeScript

En TypeScript, pase un tipo mediante el genérico para definir props más claras y con comprobación de tipos. El compilador convierte el tipo en declaraciones de tiempo de ejecución.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Props opcionales con ?

Añada un signo de interrogación a una propiedad del tipo para hacerla opcional. Las props opcionales pueden ser undefined si el componente padre no las proporciona.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Valores predeterminados con withDefaults

La forma basada en tipos no ofrece un lugar para los valores predeterminados, por lo que Vue proporciona withDefaults. Envuelva defineProps y proporcione un objeto de valores predeterminados.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Usar props en la plantilla

Las props son reactivas. Haga referencia a ellas directamente en la plantilla o mediante props.x en el script.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Las props son de solo lectura

No modifique nunca una prop dentro del componente hijo. Las props fluyen en una sola dirección: del padre al hijo. Si necesita una copia local editable, derívela con computed o un ref local.

Declarar eventos con defineEmits

defineEmits declara qué eventos puede emitir un componente. La forma basada en tiempo de ejecución recibe un array de nombres de eventos.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Eventos tipados con TypeScript

La forma basada en tipos permite especificar tanto los nombres de los eventos como los tipos de sus datos. Así se detectan errores como emitir un argumento del tipo incorrecto.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Emitir con datos

Llame a emit con el nombre del evento y los datos que necesite. El componente padre escucha mediante @submit y recibe esos datos.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Integrarlo todo

Un componente hijo recibe una prop title y emite un evento submit. El componente padre reacciona a ambos: datos unidireccionales, limpios y tipados, junto con eventos explícitos.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Comprobación rápida

Compruebe cuánto entiende sobre props y emits.

Resumen

Ha aprendido sobre la entrada y salida de componentes en <script setup>:

  • defineProps declara las entradas, mediante un objeto de tiempo de ejecución o un genérico de TS.
  • Utilice ? para las props opcionales y withDefaults para los valores predeterminados.
  • Las props son de solo lectura y fluyen en una sola dirección.
  • defineEmits declara eventos, con nombres y datos opcionales tipados.

Preguntas frecuentes

¿La lección «defineProps y defineEmits» es gratis?

Sí — el texto completo de «defineProps y defineEmits» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «defineProps y defineEmits»?

Props tipadas con defineProps (), defineEmits () y withDefaults() para valores predeterminados. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «defineProps y defineEmits»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Introducción a script setup
  2. defineProps y defineEmits
  3. defineExpose y useAttrs
  4. Importación y uso de composables en script setup
← Volver a Vue Academy