Provide and inject for deep passing in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to provide a value in the root component.

Vue

<script setup>
import { provide } from 'vue'

provide('theme', [1])
</script>

Drag options to blanks, or click blank then click option'

Ainject

B'dark'

Cdark

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the string value.

Using the key instead of the value in provide.

The provide function needs a key and a value. The value here is the string 'dark'.

2fill in blank

medium

Complete the code to inject the provided value in a nested component.

Vue

<script setup>
import { inject } from 'vue'

const theme = inject([1])
</script>

Drag options to blanks, or click blank then click option'

A'dark'

Btheme

C'theme'

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of the string key.

Forgetting quotes around the key.

The inject function requires the key as a string to retrieve the provided value.

3fill in blank

hard

Fix the error in the nested component to correctly inject the provided value.

Vue

<script setup>
import { inject } from 'vue'

const theme = inject([1])
console.log(theme)
</script>

Drag options to blanks, or click blank then click option'

A'theme'

B'Theme'

Cprovide

Dtheme

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of the string key.

Mismatching the case of the key.

The inject key must exactly match the provide key as a string, including case sensitivity.

4fill in blank

hard

Fill both blanks to provide and inject a reactive value for deep passing.

Vue

<script setup>
import { ref, provide, inject } from 'vue'

const count = ref(0)
provide([1], count)

const injectedCount = inject([2])
</script>

Drag options to blanks, or click blank then click option'

A'count'

Bcount

C'counter'

D'Count'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys in provide and inject.

Forgetting quotes around the keys.

The key used in provide and inject must be the same string 'count' to share the reactive value.

5fill in blank

hard

Fill all three blanks to create a nested component that injects a provided value and updates it.

Vue

<script setup>
import { ref, provide, inject } from 'vue'

const message = ref('Hello')
provide([1], message)

const injectedMessage = inject([2])

function updateMessage() {
  injectedMessage.value = [3]
}
</script>

Drag options to blanks, or click blank then click option'

A'message'

B'Hello Vue!'

C'Message'

D'messageText'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys in provide and inject.

Not updating the .value of the ref.

Forgetting quotes around string values.

The key 'message' must be used in provide and inject. The update sets the reactive value to 'Hello Vue!'.