provide() nei componenti padre
Fornitura di valori primitivi, ref reattivi e oggetti — mantenimento della reattività tramite provide
provide() nei componenti padre è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
La funzione provide
Vue provide consente a un componente di offrire dati a tutti i suoi discendenti. La chiami in <script setup> con una chiave e un valore.
import { provide } from "vue";
provide("message", "Hello from ancestor");Qualsiasi discendente può usare inject
Una volta fornito, qualsiasi componente situato più in basso nell'albero può usare inject con la stessa chiave, indipendentemente dal numero di livelli di profondità, senza che i componenti intermedi debbano fare nulla.
App (provides "message")
-> ... -> DeepChild (injects "message")Fornire uno stato reattivo
Per mantenere la reattività nei discendenti, fornisca un ref o un oggetto reattivo invece di un valore semplice. Gli aggiornamenti al ref vengono propagati automaticamente a ogni consumatore.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);La reattività si propaga verso il basso
Quando l'antenato modifica theme.value, ogni discendente che lo ha iniettato esegue nuovamente il rendering con il nuovo valore. Questo è il vantaggio principale rispetto al passaggio di uno snapshot statico.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Proteggere lo stato con readonly
Per impostazione predefinita, un discendente potrebbe modificare il ref iniettato, distribuendo le modifiche allo stato e interrompendo il flusso unidirezionale dei dati. Racchiuda il valore in readonly(), così i consumatori potranno leggerlo ma non modificarlo.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Fornire funzioni come azioni
Per consentire ai discendenti di richiedere modifiche, fornisca una funzione insieme allo stato in sola lettura. I consumatori chiamano la funzione; solo il provider modifica l'origine.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Raggruppare stato e azioni
Un pattern efficace consiste nel fornire un singolo oggetto con lo stato in sola lettura e le relative azioni, in modo simile a un piccolo store.
provide("userStore", {
user: readonly(user),
updateName
});provide a livello di applicazione
È anche possibile fornire un valore a livello di applicazione, rendendolo disponibile a ogni componente, con una configurazione eseguita una sola volta sull'istanza dell'app. Questo argomento verrà trattato in dettaglio più avanti.
app.provide("appName", "CoddyKit");Chiavi Symbol per evitare collisioni
Le chiavi stringa possono entrare in conflitto nelle applicazioni di grandi dimensioni. Usi un Symbol esportato da un modulo condiviso come chiave, così da garantire l'unicità.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Quando usare provide
Provide è ideale per il tema, l'utente corrente, i18n, il contesto di un form o la configurazione di una funzionalità: valori necessari a un sottoalbero. Per uno o due livelli, le props normali restano più semplici.
Ambito del provider
I valori forniti sono limitati al sottoalbero del componente che li fornisce. Due sottoalberi fratelli possono fornire valori diversi con la stessa chiave senza interferire.
Verifica rapida
Come si impedisce ai discendenti di modificare lo stato fornito?
Riepilogo
Hai imparato che provide(key, value) espone dati a tutti i discendenti. Fornisci un ref per mantenere la reattività, racchiudilo in readonly() per impedirne la modifica, fornisci funzioni come azioni e preferisci chiavi Symbol per evitare collisioni.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «provide() nei componenti padre» è gratuita?
Sì — il testo completo di «provide() nei componenti padre» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «provide() nei componenti padre»?
Fornitura di valori primitivi, ref reattivi e oggetti — mantenimento della reattività tramite provide Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «provide() nei componenti padre»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Il problema del prop drilling
- provide() nei componenti padre
- inject() nei componenti figlio
- Provide/Inject per lo stato a livello di app