როგორ მუშაობს provide/inject Vue 3-ში?

Vue 3-ში provide/inject გამოიყენება მონაცემების ან დამოკიდებულებების გადაცემისთვის მშობელი კომპონენტიდან შვილებს, შუამავალი კომპონენტების გადალახვით.

• provide გამოაცხადება მშობელი კომპონენტში და უზრუნველყოფს მნიშვნელობებს.
• inject გამოიყენება შვილობილი კომპონენტებში ამ მნიშვნელობების მისაღებად.

ეს სასარგებლოა გლობალური პარამეტრების, სერვისების ან მონაცემების გადაცემისთვის, რომლებიც საჭიროა ღრმად ჩაშენებულ კომპონენტებში, ყოველ დონეზე props-ის გადაცემის გარეშე.

მაგალითი:

// მშობელი კომპონენტი
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// შვილი კომპონენტი
export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

ამ გზით, შვილი კომპონენტი იღებს მშობლის მიერ მიწოდებულ 'dark' მნიშვნელობას.