Vue 3'te provide/inject nasıl çalışır?

Vue 3'te provide/inject, verileri veya bağımlılıkları ebeveyn bileşenden çocuklara, ara bileşenleri atlamadan iletmek için kullanılır.

• provide, ebeveyn bileşende tanımlanır ve değerler sağlar.
• inject, çocuk bileşenlerde bu değerleri almak için kullanılır.

Bu, küresel ayarları, servisleri veya derinlemesine gömülü bileşenlerin ihtiyaç duyduğu verileri, her seviyede prop iletmek zorunda kalmadan iletmek için kullanışlıdır.

Örnek:

// Ebeveyn bileşen
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Çocuk bileşen
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

Bu şekilde, çocuk bileşen, ebeveyn tarafından sağlanan 'dark' değerine erişir.