Ինչպես է աշխատում 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' արժեքը։