provide() Fornecer dependências aos descendentes
Última atualização: 2026-10-22
provide() Fornecer dependências aos descendentes
provide() fornece dados no componente ancestral e descendentes de qualquer nível podem obtê-los com inject, evitando passar props camada por camada.
| Grupo | Injeção de Dependência |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
provide("theme", ref("dark"))
provide("config", readonly(config)) // recomendação: fornecer somente leitura⚙️ Argumentos
| key | String ou Symbol como chave da dependência |
|---|---|
| value | Qualquer valor (refs/objetos reativos mantêm a reatividade) |
Retorno：Nada
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The child shows 'Injected theme: dark'.💡 Pontos-chave
💡 Dica Fornecer dados ref / reactive permite que os descendentes mantenham a reatividade; fornecer valores comuns é um retrato de uma vez só.
⚠️ Aviso Recomenda-se fornecer com readonly: expor diretamente estado gravável permite que qualquer descendente altere os dados do ancestral.
ℹ️ Nota Usar constantes Symbol como chave evita conflitos de nomes (recomendado em projetos grandes/bibliotecas).
🏷️ Injeção de Dependência relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença de props?
R props são passadas explicitamente camada por camada; provide/inject atravessa níveis diretamente, mas a origem dos dados é menos intuitiva que props — adequado para contextos globais como temas e configurações.
P Os dados fornecidos podem ser alterados?
R Podem (descendentes que obtêm a referência podem alterar); por isso recomenda-se fornecer apenas readonly ou funções de alteração.
P Chaves com o mesmo nome conflitam?
R O fornecedor mais próximo prevalece; usar chaves Symbol evita isso completamente.
