provide() dans les composants parents
Fourniture de valeurs primitives, de références réactives et d’objets — maintien de la réactivité avec provide.
provide() dans les composants parents est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
La fonction provide
Dans Vue, provide permet à un composant de proposer des données à tous ses descendants. Appelez-la dans <script setup> avec une clé et une valeur.
import { provide } from "vue";
provide("message", "Hello from ancestor");N’importe quel descendant peut injecter la valeur
Une fois la valeur fournie, n’importe quel composant situé plus bas dans l’arbre peut inject la même clé, quel que soit le nombre de couches, sans que les composants intermédiaires aient à intervenir.
App (provides "message")
-> ... -> DeepChild (injects "message")Fournir un état réactif
Pour que les descendants restent réactifs, fournissez un ref ou un objet réactif plutôt qu’une valeur simple. Les mises à jour du ref sont automatiquement propagées à tous les consommateurs.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);La réactivité se propage vers le bas
Lorsque l’ancêtre modifie theme.value, chaque descendant qui l’a injecté est de nouveau rendu avec la nouvelle valeur. C’est le principal avantage par rapport au passage d’un instantané statique.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Protéger l’état avec readonly
Par défaut, un descendant pourrait modifier le ref injecté, ce qui disperse les changements d’état et rompt le flux de données unidirectionnel. Encapsulez la valeur dans readonly() afin que les consommateurs puissent la lire sans pouvoir l’écrire.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Fournir des fonctions comme actions
Pour permettre aux descendants de demander des changements, fournissez une fonction avec l’état en lecture seule. Les consommateurs appellent la fonction ; seul le fournisseur modifie la source.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Regrouper l’état et les actions
Une approche claire consiste à fournir un objet unique contenant l’état en lecture seule et ses actions, à la manière d’un petit magasin d’état.
provide("userStore", {
user: readonly(user),
updateName
});provide au niveau de l’application
Vous pouvez également fournir une valeur au niveau de l’application afin qu’elle soit disponible dans chaque composant, après une seule configuration sur l’instance de l’application. Cette possibilité sera étudiée en détail plus loin.
app.provide("appName", "CoddyKit");Des clés symboliques pour éviter les collisions
Les clés textuelles peuvent entrer en conflit dans les grandes applications. Utilisez un Symbol exporté depuis un module partagé comme clé afin de garantir son unicité.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Quand utiliser provide
Le mécanisme provide convient parfaitement au thème, à l’utilisateur actuel, à l’internationalisation, au contexte d’un formulaire ou à la configuration d’une fonctionnalité : des valeurs nécessaires à un sous-arbre. Pour une ou deux couches, de simples propriétés restent plus faciles à utiliser.
Portée du fournisseur
Les valeurs fournies sont limitées au sous-arbre du composant fournisseur. Deux sous-arbres frères peuvent fournir des valeurs différentes avec la même clé sans interférer.
Vérification rapide
Comment empêcher les descendants de modifier l’état fourni ?
Récapitulatif
Vous avez appris que provide(key, value) expose des données à tous les descendants. Fournissez un ref pour conserver la réactivité, encapsulez-le dans readonly() pour empêcher sa modification, fournissez des fonctions comme actions et privilégiez les clés Symbol pour éviter les collisions.
Questions Fréquemment Posées
La leçon « provide() dans les composants parents » est-elle gratuite ?
Oui — le texte complet de « provide() dans les composants parents » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « provide() dans les composants parents » ?
Fourniture de valeurs primitives, de références réactives et d’objets — maintien de la réactivité avec provide. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « provide() dans les composants parents » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le problème du prop drilling
- provide() dans les composants parents
- inject() dans les composants enfants
- Provide/Inject pour l’état au niveau de l’application