Svelte 17: Props de Callback — Comunicación del Componente al Padre
easy⏱ 5 mincoursesvelte
Una prop de callback es solo... una función
El hijo la declara como cualquier otra prop — let { onAddToCart } = $props(); — y la llama cuando quiere notificar al padre, pasando los datos que sean relevantes: onAddToCart(item). El padre pasa una función real en la etiqueta del componente: <Product onAddToCart={(item) => cart.push(item)} />. No hay indirección, no hay nombres de evento en string — es paso de funciones de JavaScript normal, de punta a punta.
<!-- Product.svelte -->
<script>
let { name, onAddToCart } = $props();
</script>
<button onclick={() => onAddToCart({ name })}>Add to cart</button>
<!-- App.svelte -->
<script>
import Product from './Product.svelte';
let cart = $state([]);
</script>
<Product name='Mug' onAddToCart={(item) => cart.push(item)} />
Qué reemplaza esto: createEventDispatcher (Svelte 4)
Svelte 4 requería importar createEventDispatcher, llamar dispatch('addToCart', item) dentro del hijo, y escuchar con la directiva on:addToCart={...} en la etiqueta del componente del padre. Funcionaba, pero es más ceremonia para exactamente el mismo resultado, y el nombre del evento era solo un string — un typo en la llamada a dispatch o en la directiva on: fallaba en silencio. El snippet de solo lectura de abajo muestra esa forma vieja puramente para comparar; NO se espera que la escribas.
<!-- Svelte 4 style — shown for comparison only, do NOT use in new code -->
<!-- Product.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let name;
</script>
<button on:click={() => dispatch('addToCart', { name })}>Add to cart</button>
<!-- App.svelte -->
<Product name='Mug' on:addToCart={(e) => cart.push(e.detail)} />
Props de callback vs $bindable — ¿cuál elegir?
Usá una prop de callback (onSomething) cuando el hijo está reportando un EVENTO o un dato puntual — un clic, un envío, un item agregado. Usá $bindable cuando el hijo es el DUEÑO natural de un valor que se actualiza continuamente y al que el padre también necesita acceso en vivo, como el valor actual de un control de formulario. La mayoría de la comunicación padre/hijo en apps reales es con props de callback; $bindable es el caso especial.