En Svelte podemos indicar funciones que se van a invocar cuando se desencadena un evento. Por ejemplo, para invocar a holaMundo en el click de un elemento podemos indicarlo como on:click={holaMundo}

En ocasiones se necesita pasar parámetros a esa función dentro de un componente de Svelte, pero no podemos indicarlo así:

on:click={holaMundo(parametro)}

Ya que eso ejecutará la función tan pronto se cargue el componente, y no esperará al clic. Por ello es que en este post te mostraré cómo pasar argumentos a las funciones en Svelte sin que se invoquen automáticamente.

Pasar parámetros a función en Svelte

Si quieres la solución rápida, mira lo siguiente. Para pasar argumentos, define una función anónima y dentro de esa función invoca a la verdadera función pasando el verdadero argumento. Así:

on:click={()=>{holaMundo(parametro)}}

Hay que separar las cosas. La definición de la función queda así: ()=>{holaMundo(parametro)}

Y estamos indicando esa función dentro del on:click={}

También podemos pasar el event y el propio elemento del DOM, pero eso lo explicaré en otra sección más adelante.

Entendiendo el funcionamiento de Svelte

En este y otros frameworks, se debe indicar la función que se va a invocar en el evento. Le debemos dar algo que se evalúe en una función o que básicamente sea del tipo function.

Por ello es que si tenemos una función llamada holaMundo, debemos indicarlo así:

on:click={holaMundo}

También es válido (pero no funcionará de la manera que se espera) usar paréntesis e invocar a la función, así:

on:click={holaMundo()}

Pero en ese caso lo que se haría es invocar a la función y Svelte esperaría que holaMundo regrese una función. Sí: se esperaría que al invocar a la función, la misma devuelva otra función que se ejecutaría al hacer clic.

Además, esa función sería invocada al inicio cuando el componente sea montado

Pasando el evento y el elemento del DOM

En varias ocasiones es necesario obtener el elemento del DOM en donde se desencadenó el evento así como el evento en cuestión. En ese caso podemos hacerlo así:

on:change={(event) => {
    onEstadoInputCambiado(event);
}}

Nota: aquí en lugar de click estoy escuchando el evento change; recuerda que solo es para ejemplificar.

Lo importante es que estamos pasando el evento, y luego dentro de la función podemos acceder al mismo así como al elemento del DOM:

const onEstadoInputCambiado = async (event) => {
    const propioElemento = event.target;
};

Tenemos al evento en event y al elemento del DOM en event.target.

Pasando otros parámetros

Para finalizar veamos cómo pasar parámetros propios, más allá del evento y elemento HTML.

Yo tengo un conjunto de elementos input checkbox repetidos con each, cuando se cambia el estado quiero invocar a una función y pasarle el elemento del each que en este caso sería elemento.terminado.

Lo hago así:

{#each nota.elementos as elemento, indice}
    <div class="flex items-center">
        <input
            type="checkbox"
            on:change={(event) => {
                onEstadoInputCambiado(event, elemento.terminado);
            }}
        />
    </div>
{/each}

En resumen

Si la función no tiene parámetros, ejecútala así:

on:click={holaMundo}

Si quieres pasar parámetros:

on:click={()=>{holaMundo("parámetro 1", "parámetro 2")}}

Si quieres pasar el evento y argumentos:

on:click={(event)=>{holaMundo(evento, "parámetro 1", "parámetro 2")}}

Nota final: estoy usando parámetros y argumentos como sinónimos.