Svelte

Pasar parámetros a función de Svelte

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

4 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

4 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

4 semanas hace

Esta web usa cookies.