Renderless components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a renderless component using Vue's

Vue

<script setup>
const props = defineProps({ count: Number })
const emit = defineEmits(['increment'])

function increment() {
  emit('[1]')
}
</script>

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

Aclick

Bupdate

Cchange

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using an event name not declared in defineEmits.

Forgetting to emit an event.

The renderless component emits an event named increment when the increment function is called. This allows the parent to react to the event.

2fill in blank

medium

Complete the code to expose a reactive state from a renderless component using the Composition API.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}

const exposed = { count, [1] }
</script>

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

Adecrement

Bincrement

Creset

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing a function that does not exist.

Not exposing the function that updates the state.

The renderless component exposes both the reactive count and the increment function so the parent can use them.

3fill in blank

hard

Fix the error in the renderless component by completing the code to correctly use slots for rendering.

Vue

<template>
  <slot :count="count" :increment="[1]" />
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

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

Aincrement

Bincrement()

Cincrement.value

Dincrement.count

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function instead of passing it.

Trying to access a non-existent property on the function.

When passing functions as slot props, pass the function reference without calling it (no parentheses).

4fill in blank

hard

Fill both blanks to create a renderless component that exposes a reactive count and an increment function using defineExpose.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}

defineExpose({ [1], [2] })
</script>

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

Acount

Bincrement

Cdecrement

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing functions or variables not declared.

Forgetting to expose both state and function.

defineExpose allows the parent component to access the reactive count and the increment function from the renderless component.

5fill in blank

hard

Fill all three blanks to create a renderless component that emits an event, exposes state, and uses a slot with props.

Vue

<template>
  <slot :count="[1]" :increment="[2]" />
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
  emit('[3]')
}
const emit = defineEmits(['increment'])
</script>

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

Acount

Bincrement

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the wrong variable names to the slot.

Emitting an event name not declared in defineEmits.

The slot receives count and increment as props. The increment function emits the increment event.