0Pricing
Vue Academy · Ders

Alt Bileşenlerde inject()

Varsayılan değerlerle inject(), zorunlu enjeksiyon, ad alanları için Symbol anahtarları.

Alt Bileşenlerde inject(), CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.

inject İşlevi

inject, bir ata bileşenin sağladığı değeri aynı anahtarla arayıp alır. Bu işlevi <script setup> içinde çağırın.

import { inject } from "vue";
const theme = inject("theme");

Reaktivite Korunur

Ata bileşen bir ref sağladıysa alınan değer aynı ref değeridir. theme.value değerini okumak reaktif kalır ve sağlayıcı bunu değiştirdiğinde güncellenir.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

Varsayılan Değer Sağlama

Hiçbir ata bileşen anahtarı sağlamadıysa inject, undefined döndürür. Bileşenin zarif bir şekilde çalışmaya devam etmesi için ikinci bağımsız değişkeni varsayılan değer olarak geçirin.

const theme = inject("theme", "light");
// "light" used when nothing was provided

Üretici Varsayılanları

Nesne türündeki veya oluşturulması maliyetli varsayılan değerler için bir üretici işlevi geçin ve üçüncü bağımsız değişkeni true olarak ayarlayın. Böylece varsayılan değer yalnızca gerektiğinde oluşturulur.

const config = inject("config", () => ({ retries: 3 }), true);

Eylemleri Alma

Sağlayıcı bir işlev de sunduysa aynı şekilde bu işlevi alın ve değişiklik istemek için çağırın; değiştirme işleminin sahibi sağlayıcıdır.

const updateName = inject("updateName");
updateName("Grace");

Durum Deposu Nesnesini Alma

Sağlayıcı durumu ve eylemleri bir araya getirdiyse nesnenin tamamını alın ve ihtiyacınız olan bölümleri ayrıştırın.

const { user, updateName } = inject("userStore");

TypeScript'te Tür Güvenli Alma

Vue, almayı tür güvenli hâle getirmek için InjectionKey<T> dışa aktarır. Türü belirtilmiş bir anahtar, TypeScript'e alınan değerin tam olarak hangi biçime sahip olduğunu bildirir.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

Türü Belirtilmiş Anahtarı Kullanma

Türü belirtilmiş anahtarla sağlayın ve alın. TypeScript artık değer türünü çıkarır ve uyuşmazlıkları bildirir.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

Benzersizlik İçin Symbol Anahtarları

Anahtar olarak bir Symbol kullanmak (genellikle InjectionKey ile birlikte), büyük bir kod tabanında ilgisiz sağlayıcılar arasındaki dizge çakışmalarını garanti eder şekilde önler.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

Eksik Sağlayıcıları Ele Alma

Katı kurulumlarda, gerekli bir alma işlemi eksikse hata oluşturmak isteyebilirsiniz. Böylece bağlantı hataları sessizce undefined kullanmak yerine erken ortaya çıkar.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

Alt Ağacın Her Yerinden Değer Alma

Bir ata bileşen anahtarı sağladığı sürece bileşen, derinliği ne olursa olsun değeri alabilir. Aradaki bileşenlere dokunulmaz; provide/inject kullanımının amacı da budur.

Kısa Kontrol

Hiçbir sağlayıcı yokken inject("theme", "light") ne döndürür?

Özet

inject(key) işlevinin sağlanan bir değeri okuduğunu ve ref değerleri için reaktiviteyi koruduğunu öğrendiniz. Zarif bir yedek davranış için varsayılan değer (veya üretici) geçin; tür güvenli ve çakışmasız alma işlemi için InjectionKey<T> ile Symbol anahtarlarını kullanın.

Sıkça Sorulan Sorular

“Alt Bileşenlerde inject()” dersi ücretsiz mi?

Evet — “Alt Bileşenlerde inject()” 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.

“Alt Bileşenlerde inject()” dersinde ne öğreneceğim?

Varsayılan değerlerle inject(), zorunlu enjeksiyon, ad alanları için Symbol anahtarları. 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 3. dersidir.

“Alt Bileşenlerde inject()” 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

  1. Prop Aktarma Sorunu
  2. Üst Bileşenlerde provide()
  3. Alt Bileşenlerde inject()
  4. Uygulama Düzeyinde Durum için Provide/Inject
← Vue Academy Sayfasına Dön