Generic components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a generic component that accepts a type prop.

Vue

<script setup>
const props = defineProps({
  type: [1]
})
</script>

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

Astring

B"string"

C"String"

DString

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'string' instead of String

Putting quotes around the type name

In Vue, prop types are defined using the constructor like String, not lowercase or quoted strings.

2fill in blank

medium

Complete the code to emit a generic event named update from the component.

Vue

<script setup>
const emit = defineEmits([[1]])
</script>

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

A"update"

B"input"

C"change"

D"click"

Attempts:

3 left

💡 Hint

Common Mistakes

Using event names unrelated to updates like 'click' or 'change'

Not using quotes around the event name

The generic event to emit for updates is usually called update.

3fill in blank

hard

Fix the error in the generic component slot usage by completing the blank.

Vue

<template>
  <slot name=[1]></slot>
</template>

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

A"default"

Bdefault

C'default'

D"slot"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the slot name

Using single quotes instead of double quotes

Slot names must be strings in quotes, like "default".

4fill in blank

hard

Fill both blanks to define a generic component that accepts a prop and emits an event.

Vue

<script setup>
const props = defineProps({
  value: [1]
})
const emit = defineEmits([[2]])
</script>

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

AString

B"input"

C"update:modelValue"

DNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event names like 'input' instead of 'update:modelValue'

Using lowercase 'string' instead of String

The prop value is usually a String, and the event to emit for v-model is "update:modelValue".

5fill in blank

hard

Fill all three blanks to create a generic component that accepts a prop, emits an event, and uses a slot.

Vue

<script setup>
const props = defineProps({
  label: [1]
})
const emit = defineEmits([[2]])
</script>
<template>
  <button @click="emit([3])">{{ props.label }}</button>
  <slot></slot>
</template>

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

AString

B"click"

D"submit"

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching event names between defineEmits and emit call

Using wrong prop types like Number for label

The prop label is a String. The event emitted is "click", and the emit call uses the event name "click".