este es mi código de componente esbelto
<script> export let canCascade = true; let show = true; function cascade() { if (canCascade) { show = !show; } } </script> {#if show} <div class="shade" on:click|self={cascade}> shade </div> {/if} Cuando uso el componente como <Component canCascade=false /> el 'bloque si' no funciona. Pero codificar el valor dentro simplemente funciona bien. ¿Me estoy perdiendo algo aquí, algún error conceptual?
Como @Corrl señaló en los comentarios, debe usar {corchetes}. Si no lo hace, la variable seguirá las reglas de un atributo html.
Respuesta de trabajo https://svelte.dev/repl/d13df678eab243e9a13fb705da197219?version=3
En Svelte, cuando queremos pasar el valor/expresión de JavaScript a un atributo de un componente, necesitamos envolver el valor/expresión con corchetes {} .
De lo contrario, se usará como una cadena .
Como ejemplo, echa un vistazo al siguiente código:
Componente esbelto:
<script> export let test = true; $test: console.log(`typeof test = ${typeof test}`); </script>App.svelte:
<script> import Component from "./Component.svelte"; </script> <Component test=true /> <div />Cuando abra la consola dentro de las herramientas de desarrollo del navegador, el resultado será :
tipo de prueba = cadena