O que são slots e scoped slots?

Question

Accepted Answer

**Slots** permitem que um componente pai passe **conteúdo de template** para um componente filho — é como você constrói wrappers flexíveis e reutilizáveis (cards, modais, layouts) onde o consumidor controla o markup interno. ## Slot básico ```vue ``` ```vue

Title

Any content!

``` O filho define um "espaço" (``); o pai o preenche com qualquer markup desejado. Isso é muito mais flexível do que passar strings através de props. ## Slots nomeados — múltiplos pontos de inserção ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slots — filho passa dados PARA CIMA para o conteúdo do slot Às vezes o filho tem dados que o slot do pai precisa (ex. cada item em uma lista). **Scoped slots** expõem dados do filho para o template do pai: ```vue ``` ```vue ``` Scoped slots são a chave para **componentes renderless/headless**: o filho lida com a lógica (looping, fetching, estado) e deixa o pai controlar totalmente a apresentação. ## Por que isso importa Slots são o mecanismo de distribuição de conteúdo do Vue — essencial para componentes de layout e wrapper reutilizáveis. Slots nomeados fornecem múltiplos pontos de inserção, e scoped slots (expondo dados do filho para templates definidos pelo pai) ativam padrões poderosos como componentes headless e listas/tabelas customizáveis. São eles que tornam componentes Vue compostos em vez de rígidos.