Sistemul provide() și inject() în Vue 3 în Vue.js & Nuxt

Ce sunt provide() și inject()

Atunci când trebuie să transmiteți date de la o componentă rădăcină către o componentă aflată la adâncime mare în arbore, transmiterea de proprietăți prin fiecare nivel intermediar (prop drilling) este anevoioasă. Cuplul provide() și inject() rezolvă această problemă:

• Componenta strămoș oferă datele prin provide('cheie', date).
• Orice descendent din arbore poate citi direct datele prin inject('cheie').

<!-- Componenta Părinte: App.vue -->
<script setup>
import { ref, provide } from 'vue';

const tema = ref('intunecata');
provide('temaCurenta', tema);
</script>

<!-- Componenta Descendent Adânc: ButonSchimbare.vue -->
<script setup>
import { inject } from 'vue';

const tema = inject('temaCurenta', 'luminoasa');
</script>