Πώς λειτουργεί το 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' που παρέχεται από τον γονέα.