Vue Academy · Lección

Props y eventos personalizados

Pase datos hacia abajo con props y emita eventos hacia los componentes padres

Props y eventos personalizados es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. 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 3 lecciones en total.

Comunicación entre padre e hijo

Los componentes se comunican en dos direcciones:

Las props envían datos del padre al hijo
Los eventos envían mensajes del hijo al padre

Este flujo de datos unidireccional mantiene las aplicaciones predecibles.

Declaración de props

El componente hijo declara las props que acepta. En script setup, use defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

Props con tipos

Declare las props como un objeto para especificar sus tipos con fines de validación.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Props con valores predeterminados y obligatorias

Puede marcar las props como required y asignarles valores default.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Envío de props desde un componente padre

El componente padre envía datos como atributos. Use : para vincular valores dinámicos.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Convención para nombrar props

Declare las props en camelCase en JS y páselas en kebab-case en las plantillas.

Prop de JS: isActive
Atributo de la plantilla: :is-active

Vue convierte automáticamente entre ambos formatos.

Las props son de solo lectura

Un componente hijo no debe mutar sus props directamente.

Las props fluyen en una sola dirección: hacia abajo
Mutarlas rompe la previsibilidad y genera advertencias
Para cambiar datos compartidos, emita un evento para que el componente padre los actualice

Declaración de eventos emitidos

El componente hijo declara los eventos que emite mediante defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Emisión de un evento

Llame a la función emit para enviar un evento hacia arriba, opcionalmente con un payload.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Emisión en la Options API

En la Options API, llame a this.$emit en su lugar.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

Escucha de eventos en el componente padre

El componente padre escucha con @event-name y recibe el payload.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Comprobación rápida

Compruebe sus conocimientos sobre props y eventos.

Repaso: props y eventos

Ha aprendido sobre la comunicación entre componentes:

defineProps declara props con tipos y valores predeterminados
Las props fluyen hacia abajo y son de solo lectura
defineEmits declara eventos
emit("name", payload) envía eventos hacia arriba
El componente padre escucha con @event

A continuación: slots y slots con ámbito.

Preguntas frecuentes

¿La lección «Props y eventos personalizados» es gratis?

Sí — el texto completo de «Props y eventos personalizados» 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 3 lecciones en total.

¿Qué aprenderé en «Props y eventos personalizados»?

Pase datos hacia abajo con props y emita eventos hacia los componentes padres 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 3.

¿Cuánto tiempo toma la lección «Props y eventos personalizados»?

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

← Volver a Vue Academy