provide() em componentes pais
Fornecimento de valores primitivos, refs reativos e objetos — mantendo a reatividade por meio de provide.
provide() em componentes pais é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.
A função provide
O Vue permite que provide ofereça dados a todos os descendentes de um componente. Chame-a em <script setup> com uma chave e um valor.
import { provide } from "vue";
provide("message", "Hello from ancestor");Qualquer descendente pode injetar
Depois de fornecido, qualquer componente em qualquer ponto abaixo na árvore pode fazer inject da mesma chave, independentemente da quantidade de camadas, sem que os componentes intermediários precisem fazer algo.
App (provides "message")
-> ... -> DeepChild (injects "message")Fornecendo estado reativo
Para manter os descendentes reativos, forneça uma ref ou um objeto reativo em vez de um valor simples. As atualizações da referência se propagam automaticamente para todos os consumidores.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);A reatividade flui para baixo
Quando o ancestral altera theme.value, todo descendente que o injetou é renderizado novamente com o novo valor. Essa é a principal vantagem em relação à passagem de uma cópia estática.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Protegendo o estado como somente leitura
Por padrão, um descendente poderia alterar a referência injetada, espalhando mudanças de estado e quebrando o fluxo de dados unidirecional. Envolva o valor em readonly() para que os consumidores possam lê-lo, mas não modificá-lo.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Fornecendo funções como ações
Para permitir que os descendentes solicitem alterações, forneça uma função junto com o estado somente para leitura. Os consumidores chamam a função; somente o provedor modifica a fonte.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Agrupando estado e ações
Um padrão organizado é fornecer um único objeto com o estado somente para leitura e suas ações, de forma semelhante a um pequeno armazenamento de estado.
provide("userStore", {
user: readonly(user),
updateName
});provide no nível do app
Também é possível fornecer dados no nível da aplicação, para que o valor fique disponível para todos os componentes, configurado uma única vez na instância do app. Isso será abordado em detalhes mais adiante.
app.provide("appName", "CoddyKit");Chaves de símbolo para evitar colisões
Chaves de texto podem entrar em conflito em apps grandes. Use um Symbol exportado de um módulo compartilhado como chave para garantir a exclusividade.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Quando usar provide
Provide é ideal para theme, usuário atual, i18n, contexto de formulário ou configuração de funcionalidade — valores necessários em uma subárvore. Para um ou dois níveis, props simples continuam sendo mais fáceis.
Escopo do provedor
Os valores fornecidos ficam limitados à subárvore do componente que os fornece. Duas subárvores irmãs podem fornecer valores diferentes sob a mesma chave sem interferir uma na outra.
Verificação rápida
Como impedir que os descendentes alterem o estado fornecido?
Recapitulação
Você aprendeu que provide(key, value) expõe dados a todos os descendentes. Forneça uma ref para manter a reatividade, envolva-a em readonly() para impedir alterações, forneça funções como ações e prefira chaves Symbol para evitar colisões.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “provide() em componentes pais” é grátis?
Sim — o texto completo de “provide() em componentes pais” é 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 “provide() em componentes pais”?
Fornecimento de valores primitivos, refs reativos e objetos — mantendo a reatividade por meio de provide. 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 2 de 4.
Quanto tempo leva a aula “provide() em componentes pais”?
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
- O problema da prop drilling
- provide() em componentes pais
- inject() em componentes filhos
- Provide/Inject para estado no nível da aplicação