Üst Bileşenlerde provide()
İlkel değerleri, reaktif ref'leri ve nesneleri sağlama — provide üzerinden reaktifliği koruma.
Üst Bileşenlerde provide(), CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
provide İşlevi
Vue'da provide, bir bileşenin verileri tüm alt bileşenlerine sunmasını sağlar. Bu işlevi <script setup> içinde bir anahtar ve değerle çağırın.
import { provide } from "vue";
provide("message", "Hello from ancestor");Her Alt Bileşen Değeri Alabilir
Bir kez sağlandıktan sonra, ağacın aşağısındaki herhangi bir bileşen, arada bulunan bileşenlerin hiçbir şey yapmasına gerek kalmadan, kaç katman derinde olursa olsun aynı anahtarla inject kullanarak değeri alabilir.
App (provides "message")
-> ... -> DeepChild (injects "message")Reaktif Durum Sağlama
Alt bileşenlerin reaktif kalması için düz bir değer yerine bir ref (veya reaktif bir nesne) sağlayın. ref üzerindeki güncellemeler otomatik olarak her tüketiciye iletilir.
import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);Reaktivite Aşağıya Doğru Akıyor
Ata bileşen theme.value değerini değiştirdiğinde, bu değeri alan her alt bileşen yeni değerle yeniden oluşturulur. Bu, statik bir anlık görüntü aktarmaya kıyasla temel avantajdır.
function toggle() {
theme.value = theme.value === "dark" ? "light" : "dark";
}Durumu readonly ile Koruma
Varsayılan olarak bir alt bileşen, alınan ref değerini değiştirebilir; bu da durum değişikliklerini dağınık hâle getirir ve tek yönlü veri akışını bozar. Tüketicilerin yalnızca okuyabilmesi, yazamaması için değeri readonly() ile sarın.
import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));İşlevleri Eylem Olarak Sağlama
Alt bileşenlerin değişiklik istemesine izin vermek için salt okunur durumun yanında bir işlev de sağlayın. Tüketiciler işlevi çağırır; kaynak üzerindeki değişikliği yalnızca sağlayıcı yapar.
function updateName(name) {
user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);Durumu ve Eylemleri Birleştirme
Temiz bir yaklaşım, salt okunur durumu ve eylemlerini, küçük bir durum deposuna benzer şekilde tek bir nesne içinde sağlamaktır.
provide("userStore", {
user: readonly(user),
updateName
});Uygulama Düzeyinde provide
Değeri her bileşenin kullanabilmesi için uygulama düzeyinde de sağlayabilirsiniz. Bu işlem uygulama örneğinde bir kez kurulur. (Ayrıntıları ileride ele alınacaktır.)
app.provide("appName", "CoddyKit");Çakışmaları Önlemek İçin Symbol Anahtarları
Dizge anahtarları büyük uygulamalarda çakışabilir. Benzersizliği garanti etmek için paylaşılan bir modülden dışa aktarılan bir Symbol değerini anahtar olarak kullanın.
// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);provide Ne Zaman Kullanılır
provide; theme, mevcut kullanıcı, i18n, form bağlamı veya özellik yapılandırması gibi bir alt ağacın ihtiyaç duyduğu değerler için idealdir. Bir ya da iki seviye için düz props kullanmak hâlâ daha basittir.
Sağlayıcı Kapsamı
Sağlanan değerlerin kapsamı, sağlayıcı bileşenin alt ağacıyla sınırlıdır. Birbirine kardeş iki alt ağaç, aynı anahtar altında birbirini etkilemeden farklı değerler sağlayabilir.
Kısa Kontrol
Alt bileşenlerin sağlanan durumu değiştirmesini nasıl engellersiniz?
Özet
provide(key, value) işlevinin verileri tüm alt bileşenlere sunduğunu öğrendiniz. Reaktiviteyi korumak için bir ref sağlayın, değişikliği önlemek için bunu readonly() ile sarın, işlevleri eylem olarak sunun ve çakışmaları önlemek için Symbol anahtarlarını tercih edin.
Sıkça Sorulan Sorular
“Üst Bileşenlerde provide()” dersi ücretsiz mi?
Evet — “Üst Bileşenlerde provide()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Üst Bileşenlerde provide()” dersinde ne öğreneceğim?
İlkel değerleri, reaktif ref'leri ve nesneleri sağlama — provide üzerinden reaktifliği koruma. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Üst Bileşenlerde provide()” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Prop Aktarma Sorunu
- Üst Bileşenlerde provide()
- Alt Bileşenlerde inject()
- Uygulama Düzeyinde Durum için Provide/Inject