provide() w komponentach rodzica
Udostępnianie wartości prostych, reaktywnych refów i obiektów — zachowanie reaktywności przez provide.
provide() w komponentach rodzica to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Funkcja provide
Vue provide pozwala komponentowi udostępnić dane wszystkim jego potomkom. Należy wywołać ją w <script setup>, przekazując klucz i wartość.
import { provide } from "vue";
provide("message", "Hello from ancestor");Każdy potomek może użyć inject
Po udostępnieniu danych każdy komponent znajdujący się niżej w drzewie może użyć inject z tym samym kluczem — niezależnie od liczby warstw — bez wykonywania jakichkolwiek działań przez komponenty pośrednie.
App (provides "message")
-> ... -> DeepChild (injects "message")Udostępnianie reaktywnego stanu
Aby zachować reaktywność u potomków, należy udostępnić ref lub obiekt reaktywny zamiast zwykłej wartości. Aktualizacje ref są automatycznie przekazywane wszystkim komponentom, które z niego korzystają.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);Reaktywność przepływa w dół
Gdy przodek zmieni theme.value, każdy potomek, który użył tego ref, zostanie ponownie wyrenderowany z nową wartością. To kluczowa przewaga nad przekazywaniem statycznej kopii danych.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Ochrona stanu za pomocą readonly
Domyślnie potomek może zmodyfikować wstrzyknięty ref, co rozprasza zmiany stanu i zaburza jednokierunkowy przepływ danych. Należy opakować wartość w readonly(), aby komponenty korzystające z niej mogły ją odczytywać, ale nie modyfikować.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));Udostępnianie funkcji jako akcji
Aby umożliwić potomkom żądanie zmian, należy udostępnić funkcję wraz ze stanem tylko do odczytu. Komponenty korzystające z danych wywołują tę funkcję, a źródło modyfikuje wyłącznie komponent udostępniający dane.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Łączenie stanu i akcji
Dobrym wzorcem jest udostępnienie jednego obiektu zawierającego stan tylko do odczytu i powiązane z nim akcje, podobnie jak w przypadku niewielkiego store.
provide("userStore", {
user: readonly(user),
updateName
});provide na poziomie aplikacji
Można również udostępniać dane na poziomie aplikacji, dzięki czemu wartość będzie dostępna dla każdego komponentu. Konfiguruje się ją tylko raz na instancji aplikacji. (Szczegóły zostaną omówione później).
app.provide("appName", "CoddyKit");Klucze Symbol zapobiegające kolizjom
Klucze tekstowe mogą kolidować w dużych aplikacjach. Należy użyć elementu Symbol wyeksportowanego ze współdzielonego modułu jako klucza, aby zagwarantować jego unikalność.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);Kiedy używać provide
Provide idealnie nadaje się do motywu, bieżącego użytkownika, i18n, kontekstu formularza lub konfiguracji funkcji — czyli wartości potrzebnych w poddrzewie. W przypadku jednej lub dwóch warstw prostsze pozostają zwykłe propsy.
Zakres działania providera
Udostępnione wartości są ograniczone do poddrzewa komponentu, który je udostępnia. Dwa poddrzewa rodzeństwa mogą udostępniać różne wartości pod tym samym kluczem, nie wpływając na siebie nawzajem.
Szybkie sprawdzenie
Jak uniemożliwić potomkom modyfikowanie udostępnionego stanu?
Podsumowanie
Nauczyli się Państwo, że provide(key, value) udostępnia dane wszystkim potomkom. Należy udostępnić ref, aby zachować reaktywność, opakować go w readonly(), aby uniemożliwić modyfikowanie, udostępniać funkcje jako akcje oraz preferować klucze Symbol, aby uniknąć kolizji.
Często zadawane pytania
Czy lekcja „provide() w komponentach rodzica” jest bezpłatna?
Tak — pełny tekst „provide() w komponentach rodzica” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „provide() w komponentach rodzica”?
Udostępnianie wartości prostych, reaktywnych refów i obiektów — zachowanie reaktywności przez provide. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „provide() w komponentach rodzica”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Problem prop drilling
- provide() w komponentach rodzica
- inject() w komponentach potomnych
- Provide/Inject dla stanu na poziomie aplikacji