Nomes dinâmicos de slots
v-slot:[dynamicName], seleção programática de slots e renderização condicional de slots.
Nomes dinâmicos de slots é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Por que usar nomes dinâmicos para áreas de inserção
Às vezes, a área de inserção que você quer preencher só é conhecida em tempo de execução: ela depende de uma propriedade, de um state ou de uma variável de iteração. O Vue permite calcular um nome de área usando a sintaxe com colchetes.
A sintaxe de argumento dinâmico
Envolva uma expressão em colchetes depois de v-slot:. O Vue a avalia para determinar o nome da área de inserção de destino.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>Forma abreviada com colchetes
A forma abreviada # também aceita argumentos dinâmicos.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>Definindo o nome a partir de state
A expressão entre colchetes pode ler qualquer valor reativo. Alternar a variável muda qual área de inserção recebe o conteúdo.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";Alternando o conteúdo renderizado
Combinados a um filho que define várias áreas nomeadas, os nomes dinâmicos permitem que um único modelo destaque regiões diferentes com base no state.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>Escolhendo nomes a partir de props
Uma propriedade do componente pode decidir a área de inserção. Isso é útil para contêineres configuráveis nos quais quem chama o componente escolhe a região.
const props = defineProps({ target: String });
// use props.target inside #[props.target]Iterando sobre áreas dinâmicas
Você pode renderizar áreas de inserção em um laço, calculando cada nome a partir do item da iteração, o que é útil para colunas de tabelas ou sistemas de abas.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>Nomes válidos e em minúsculas
Os nomes dinâmicos de áreas de inserção devem resultar em cadeias de caracteres válidas. O valor nulo é tratado como a área padrão. Evite espaços e caracteres inválidos em nomes de atributos HTML ao usar modelos embutidos.
const name = condition ? "primary" : null;
// null -> default slotSeleção condicional de áreas
Um operador ternário dentro dos colchetes seleciona entre áreas com base em uma condição, tudo no modelo.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>Um caso de uso de componente de abas
Um componente de abas pode renderizar o conteúdo da aba ativa calculando o nome da área a partir do identificador da aba selecionada, mantendo o componente pai declarativo.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>Mantenha a clareza
As áreas dinâmicas são poderosas, mas podem ocultar a intenção. Prefira-as quando o conjunto de áreas for realmente orientado por dados; para um pequeno conjunto fixo, as áreas nomeadas simples são mais claras.
Verificação rápida
Qual sintaxe seleciona uma área cujo nome é calculado em tempo de execução?
Recapitulação
Você aprendeu que nomes dinâmicos de espaços usam a sintaxe v-slot:[expr] ou #[expr] para calcular qual espaço preencher a partir de props ou do estado, permitindo contêineres configuráveis, sistemas de abas e renderização de colunas orientada por dados.
Perguntas Frequentes
A aula “Nomes dinâmicos de slots” é grátis?
Sim — o texto completo de “Nomes dinâmicos de slots” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Nomes dinâmicos de slots”?
v-slot:[dynamicName], seleção programática de slots e renderização condicional de slots. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Nomes dinâmicos de slots”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Slots nomeados e slot padrão
- Slots com escopo: passagem de dados ao componente pai
- Nomes dinâmicos de slots
- Conteúdo alternativo de slots e verificação de slots