Componentes dinâmicos com funções render
Alternância de componentes por tipo, resolução de componentes e manutenção de slots em funções render.
Componentes dinâmicos com funções render é 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.
Componentes dinâmicos em funções de renderização
Os modelos usam <component :is="..."> para trocar componentes em tempo de execução. Em uma função de renderização, você obtém o mesmo resultado com as funções auxiliares de resolução e h.
resolveComponent
resolveComponent procura um componente registrado global ou localmente pelo nome registrado e o retorna para uso com h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Quando o destino pode ser um nome registrado, uma tag HTML ou um objeto de componente, use resolveDynamicComponent. Ele trata os três casos.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Definindo o tipo a partir das propriedades
Passe o nome do componente por meio de uma propriedade e resolva-o a cada renderização. Esse é o equivalente, em uma função de renderização, de :is.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Encaminhando propriedades
Espalhe os atributos recebidos sobre o componente resolvido para que o filho dinâmico receba tudo o que foi fornecido pelo pai.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Encaminhando áreas de conteúdo
As áreas de conteúdo chegam a um filho pelo terceiro argumento de h. Encaminhe diretamente o objeto de áreas de conteúdo do pai para que o componente dinâmico as renderize.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Um renderizador reutilizável
Combinar o encaminhamento de atributos e áreas de conteúdo produz um invólucro simples que renderiza qualquer componente pelo nome, repassando tudo.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Renderizadores dinâmicos de colunas
As tabelas de dados geralmente permitem que cada coluna especifique seu próprio componente renderizador. Armazene o nome do componente por coluna e resolva-o para cada célula.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Renderizando células dinamicamente
Para cada coluna, resolva seu renderizador e passe o valor da célula como propriedade. Um único laço controla tipos heterogêneos de células.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Recorrendo a uma tag
Se resolveDynamicComponent receber um nome não registrado, ele o tratará como uma string de elemento nativo; assim, "div" renderiza uma div real com segurança.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Por que usar funções de renderização aqui
As funções de renderização são ideais quando a estrutura é calculada: números variáveis de filhos, tipos de componente por item ou lógica que exigiria muitas condicionais aninhadas no modelo.
Verificação rápida
Qual função auxiliar resolve com segurança um destino que pode ser um nome de componente OR uma tag HTML nativa?
Recapitulação
Use resolveComponent para nomes registrados e resolveDynamicComponent quando o destino também puder ser uma tag HTML ou um objeto de componente. Encaminhe attrs como propriedades e passe o objeto slots como terceiro argumento de h. Esse padrão permite criar renderizadores dinâmicos de colunas de tabelas e invólucros flexíveis.
Perguntas Frequentes
A aula “Componentes dinâmicos com funções render” é grátis?
Sim — o texto completo de “Componentes dinâmicos com funções render” é 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 “Componentes dinâmicos com funções render”?
Alternância de componentes por tipo, resolução de componentes e manutenção de slots em funções render. 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 “Componentes dinâmicos com funções render”?
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
- A função h() em detalhes
- JSX no Vue 3 com Vite
- Componentes dinâmicos com funções render
- Padrão de componentes de ordem superior (HOC)