Aprenda a trabajar con accesorios en Svelte y permita que dos componentes con una relación padre/hijo se comuniquen entre sí.
Puede importar un componente Svelte en cualquier otro componente utilizando la sintaxis import ComponentName from 'componentPath'
:
scriptimport SignupForm from './SignupForm.svelte';/script
La ruta es relativa a la ruta del componente actual. ./
significa “esta misma carpeta”. Se utiliza ../
para retroceder una carpeta, y así sucesivamente.
Una vez que lo hagas, puedes usar el componente recién importado en el marcado, como una etiqueta HTML:
SignupForm /
De esta manera, se forma una relación padre/hijo entre los dos componentes: el que importa y el que es importado.
A menudo desea que el componente principal pase datos al componente secundario.
Puedes hacerlo usando accesorios . Los props se comportan de manera similar a los atributos en HTML simple y son una forma de comunicación unidireccional.
En este ejemplo pasamos la disabled
propiedad y true
le pasamos el valor de JavaScript:
SignupForm disabled={true}/
En el componente SignupForm, debes exportar la disabled
propiedad de esta manera: El Blog de la ginebra y el whisky on the rocks
script export let disabled/script
Esta es la forma de expresar el hecho de que la propiedad está expuesta a los componentes principales.
Al utilizar el componente, puede pasar una variable en lugar de un valor, para cambiarlo dinámicamente:
scriptimport SignupForm from './SignupForm.svelte';let disabled = true/scriptSignupForm disabled={disabled}/
Cuando disabled
cambia el valor de la variable, el componente secundario se actualizará con el nuevo valor de la propiedad. Ejemplo:
scriptimport SignupForm from './SignupForm.svelte';let disabled = truesetTimeout(() = { disabled = false }, 2000)/scriptSignupForm disabled={disabled}/
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Cómo trabajar con accesorios en Svelte
Aprenda a trabajar con accesorios en Svelte y permita que dos componentes con una relación padre/hijo se comuniquen entre sí.
programar
es
https://aprendeprogramando.es/static/images/programar-como-trabajar-con-accesorios-en-svelte-2105-0.jpg
2024-11-02
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente