Props

Um componente svelte pode ter propriedades. Vamos criar um componente.

<!-- Component.svelte -->
<script>
    const width;
    const height;
</script>

<div>Meu componente tem {width} de comprimento e {height} de altura.</div>

Declarar valores

No componente acima, declaramos dois valores: width e height. Você pode declarar com const ou let.

Mais informações: const e let

Agora vamos chamá-lo em outro arquivo.

<!-- App.svelte -->
<script>
    import Component from './Component.svelte'
</script>

<Component />

O resultado exibido na tela será: “Meu componente tem undefined de comprimento e undefined de altura.”

Isso acontece por alguns motivos.

1. Nosso <Component /> não tem as propriedades width e height definidas.
2. Não especificamos um valor padrão para width e height, e por isso o valor é undefined

Passar valores

Para passar props(propriedades) para para nosso <Component />, faça o seguinte:

<!-- App.svelte -->
<script>
    import Component from './Component.svelte'
</script>

<!-- Aqui passamos as props junto com os valores -->
<Component width={10} height={10} />

Se abrirmos o console do navegador,f12,encontramos dois erros:

”<Component> was created with unknown prop ‘width’”

”<Component> was created with unknown prop ‘height’”

Isso acontece pois não temos acesso às propriedades do componente. Para corrigir isso, basta fazer um export lá no nosso componente.

<!-- Component.svelte -->
<script>
    export const width;
    export const height;
</script>

<div>Meu componente tem {width} de comprimento e {height} de altura.</div>

Atenção!

Se você exportar um const, class ou function, ele será somente leitura de fora do componente. Svelte docs

Isso significa que esses valores não podem ser alterados, são apenas “leitura”. Não queremos isso. Queremos modificar os valores.

Ou seja, precisamos mudar de const para let. Você vai entender isso melhor na seção de reatividade, mas o que você precisar saber é que as propriedades são alteradas por reatribuição, ou seja, mudando o valor da variável.

Nosso componente agora fica assim:

<!-- Component.svelte -->
<script>
    export let width;
    export let height;
</script>

<div>Meu componente tem {width} de comprimento e {height} de altura.</div>

O resultado exibido na tela será: “Meu componente tem 10 de comprimento e 10 de altura.”

Valores padrão

Por último, é importante saber que você pode definir valores “padrão” para as propriedades. Isso significa que se eu não passar propriedades para o componente, ele vai utilizar esses valores “padrão”.

Vamos ao exemplo:

<!-- Component.svelte -->
<script>
    export let width = 15;
    export let height = 15;
</script>

<div>Meu componente tem {width} de comprimento e {height} de altura.</div>

<!-- App.svelte -->
<script>
    import Component from './Component.svelte'
</script>

<!-- Não passamos props para o componente, mas como elas tem um valor padrão, não irá dar erro. -->
<Component />

O resultado exibido na tela será: “Meu componente tem 15 de comprimento e 15 de altura.”

Spread props

Assim com os atributos, você também pode “espalhar” as propriedades dentro de um componente.

<!-- App.svelte -->
<script>
    import Component from './Component.svelte'

    const props = {
        width: 10,
        height: 10
    }
</script>

<Component {...props} />

Importante ressaltar: O objeto acima está definido como uma const, portanto, não pode sofrer reatribuição. Porém, é possível alterar o valor das propriedades.

Você aprenderá mais na seção de reatividade.