Provide and inject for deep passing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will the nested component display?

Consider a Vue 3 app using provide in a parent and inject in a deeply nested child. What text will the DeepChild component render?

Vue

/* Parent.vue */
<template>
  <Child />
</template>
<script setup>
import { provide } from 'vue'
import Child from './Child.vue'
provide('message', 'Hello from Parent')
</script>

/* Child.vue */
<template>
  <DeepChild />
</template>
<script setup>
import DeepChild from './DeepChild.vue'
</script>

/* DeepChild.vue */
<template>
  <p>{{ injectedMessage }}</p>
</template>
<script setup>
import { inject } from 'vue'
const injectedMessage = inject('message', 'Default message')
</script>

A Hello from Parent

B Default message

C undefined

D Error: injection not found

💡 Hint

Remember that provide/inject works across multiple nested components if the key matches.

The provide in the Parent component makes the value available to all descendants. The DeepChild component uses inject with the same key, so it receives 'Hello from Parent'.

❓ state_output

intermediate

What is the output after updating the provided value?

Given a parent component that provides a reactive object, and a nested child that injects and displays a property, what will the child show after the parent updates the property?

Vue

/* Parent.vue */
<template>
  <Child />
  <button @click="updateMessage">Change Message</button>
</template>
<script setup>
import { reactive, provide } from 'vue'
import Child from './Child.vue'
const state = reactive({ message: 'Initial' })
provide('state', state)
function updateMessage() {
  state.message = 'Updated'
}
</script>

/* Child.vue */
<template>
  <p>{{ state.message }}</p>
</template>
<script setup>
import { inject } from 'vue'
const state = inject('state')
</script>

A Shows Updated immediately on load

B Initial, then changes to Updated after button click

C Always shows Initial, does not update

D Error: state is undefined

💡 Hint

Reactive objects provided are shared and updates reflect in injected components.

Because the parent provides a reactive object, the child sees changes to its properties. Clicking the button updates the message, which the child displays.

📝 Syntax

advanced

Which option correctly provides and injects a value for deep passing?

Identify the correct syntax to provide a value in a parent and inject it in a nested child component in Vue 3 Composition API.

A Parent: provide('key', value); Child: const val = inject('key')

B Parent: provide = ('key', value); Child: const val = inject('key')

C Parent: provide('key', value); Child: const val = inject('key', defaultValue)

D Parent: provide('key', value); Child: const val = inject()

💡 Hint

Inject can accept a default value to avoid undefined if the key is missing.

Option C shows correct provide syntax and inject with a default value, which is valid and safe. Option C misses the default value, which is optional but recommended. Option C has invalid provide syntax. Option C calls inject without arguments, causing an error.

🔧 Debug

advanced

Why does the injected value show undefined in the nested child?

A developer uses provide in a parent and inject in a nested child, but the injected value is undefined. What is the most likely cause?

Vue

/* Parent.vue */
<script setup>
import { provide } from 'vue'
provide('data', 'Hello')
</script>

/* DeepChild.vue */
<script setup>
import { inject } from 'vue'
const data = inject('data')
console.log(data) // undefined
</script>

A All of the above

B The inject key does not match the provide key

C The child component is not a descendant of the provider

D The provide call is outside the setup function or lifecycle, so it runs too early

💡 Hint

Check provide location, key names, and component hierarchy.

All these reasons can cause inject to return undefined: provide called outside setup, mismatched keys, or child not nested inside provider component.

🧠 Conceptual

expert

How does Vue's provide/inject mechanism support deep passing without prop drilling?

Explain why provide/inject is useful for passing data deeply in a component tree compared to props, and what limitations it has.

A Provide/inject is a global state management system that replaces Vuex.

B Provide/inject automatically makes all data reactive and replaces the need for props entirely.

C Provide/inject only works for immediate children and cannot pass data deeply.

D Provide/inject allows passing data directly to any descendant without intermediate props, but it is not reactive by default and should be used sparingly.

💡 Hint

Think about how provide/inject avoids passing props through many layers and its reactivity behavior.

Provide/inject lets you pass data to any descendant without passing props through every intermediate component. However, the provided value is not reactive unless you provide a reactive object. It is not a global state system and should be used carefully.