Bem-vindo ao nosso guia completo sobre os slots do VueJS. O VueJS é uma framework JavaScript popular para criar aplicações web. Traz muitas funcionalidades que tornam o desenvolvimento mais fácil e mais eficaz, e os slots são uma delas.
Os slots são uma forma poderosa de partilhar conteúdo entre componentes. Permitem reutilizar sem esforço pedaços de HTML e integrá-los noutras partes da aplicação.
O que é um slot?
Um slot é um elemento especial de um componente VueJS que define um sítio onde pode ser injetado conteúdo vindo de fora. É útil quando queres reutilizar um componente em várias partes da aplicação, mas com conteúdos diferentes.
Imagina, por exemplo, um componente que mostra um botão. Se quiseres usar esse componente em vários sítios da aplicação, mas com textos de botão diferentes, podes recorrer a um slot para injetar o conteúdo próprio de cada utilização.
Como usar os slots?
Para usar os slots, começa por declarar um slot no componente principal. A sintaxe é esta:
<template>
<div>
<slot></slot>
</div>
</template>Depois, usas esse componente injetando conteúdo no slot declarado:
<my-component>
<p>Contenu injecté</p>
</my-component>O conteúdo injetado aparece no lugar do slot dentro do componente principal.
Tipos de slots
Há vários tipos de slots, conforme aquilo de que precisas:
Slot por omissão
É o slot usado quando nenhum outro é indicado. Declara-se simplesmente com a sintaxe <slot></slot>.
<template>
<div>
<slot></slot>
</div>
</template>
Slot nomeado
Permite declarar vários slots no mesmo componente e usá-los pelo nome. Por exemplo:
<template>
<div>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>
</template>
Slot scoped
Este slot permite injetar conteúdo com um âmbito próprio. Declara-se com a sintaxe seguinte:
<template>
<div>
<slot v-bind:text="textProp"></slot>
</div>
</template>
<script>
export default {
data() {
return {
textProp: 'Texte par défaut'
}
}
}
</script>Quando usas esse componente com um slot scoped, também podes passar propriedades através do slot:
<my-component>
<template v-slot:default="slotProps">
{{ slotProps.text }}
</template>
</my-component>Casos de uso correntes dos slots
Os slots são muito úteis em vários casos, entre eles:
- A reutilização de componentes com conteúdos diferentes.
- A personalização de componentes com estilos e comportamentos específicos.
- A criação de temas para componentes, com uso flexível em várias partes da aplicação.
Conclusão
Os slots são uma funcionalidade poderosa do VueJS que permite partilhar conteúdo entre componentes de forma flexível e eficaz. Existem vários tipos de slots para responder a necessidades diferentes, e servem numa quantidade de situações.
Esperamos que este guia detalhado sobre os slots do VueJS te tenha sido útil e te tenha dado uma boa noção de como funcionam e de como se usam.
