Saltar al contenido principal

Props

  • El estado generalmente es interno, es decir, los valores solo son accesibles dentro de un componente determinado.
  • En casi cualquier aplicación es necesario pasar datos de un componente a sus hijos, para eso se declaran las propiedades, abreviadas como props
  • En Svelte, se declaran propiedades con la runa $props

Declaración de props​

Greeting.svelte
<script>
  // Definir props
  let { name } = $props();
</script>

<p>Hello, { name }!</p>
App.svelte
<script>
  import Greetin from "./Greeting.svelte";
</script>

<!-- Pasar props -->
<Greetin name={"Jhon"} />

Valores por defecto​

Nested.svelte
<script>
  let { answer = "a mistery" } = $props();
</script>

<p>The answer is {answer}</p>
App.svelte
<script>
  import Nested from "./Nested.svelte"
</script>

<Nested answer={42} />
<Nested />  // Usar valores por defecto

Spread props​

  • Cuando en los props se esperan múltiples campos o un objeto, para no pasar las propiedades una a una se pueden extender al componente (si es que tienen los mismos campos)
App.svelte
<script>
import PackageInfo from "./PackageInfo.svelte";

const pkg = {
  name: "Svelte",
  version: 5,
  description: "blazing fast",
  website: "https://svelte.dev"
};
</script>

// Spread
<PackageInfo {...pkg} />

// Pasar valores de forma individual
//  <PackageInfo
//    name={pkg.name}
//    version={pkg.version}
//    description={pkg.description}
//    website={pkg.website}
//  />
  • Por el contrario, el componente que recibe las props, puede obtener un objeto que contenga todas las props que se pasaron usando una propiedad ...rest
PackageInfo.svelte
<script>
  let { name, version, description, website } = $props();
  //let { name, ...stuff } = $props(); 
</script>

<p>
 The <code>{name}</code> package is {description}. Download version {version} from <a href="https://www.npmjs.com/package/{name}>npm</a> and <a href={website}>learn more here</a>.
</p>
  • O bien, también puede omitir por completo la desestructuración y tomarlo como un objeto donde para ingresar a las propiedades se hace mediante la sintaxis de punto
PackageInfo.svelte
<script>
  let stuff = $props();
  
  console.log(stuff,name, stuff.version, stuff.description, stuff.website);
</script>

Props tipados​

SecondComponent.svelte
<script lang="ts">
  let { name }: { name: string } = $props();
</script>
SecondComponent.svelte
<script lang="ts">
  interface Props {
    name: string;
  }
  
  let { name }: Props = $props();
</script>