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".

Practice

1. What is the main benefit of using generic components in Vue?

easy

A. They allow reusing one component for different data types.

B. They automatically style components without CSS.

C. They replace the need for Vue Router.

D. They make components load faster by default.

Solution

1. Step 1: Understand generic components purpose

   Generic components are designed to be reusable with different data types, so you don't rewrite similar components for each type.

2. Step 2: Compare options to this purpose

   Options B, C, and D describe unrelated features. Only They allow reusing one component for different data types. matches the core benefit of generic components.

3. Final Answer:

   They allow reusing one component for different data types. -> Option A

4. Quick Check:

   Generic components = reuse for many data types [OK]

Hint: Generic means reusable for many types, not styling or routing [OK]

Common Mistakes:

• Confusing generic components with styling features
• Thinking generic components handle routing
• Assuming generic components improve load speed automatically

2. Which syntax correctly defines props with a generic type in a Vue 3 component using TypeScript?

easy

A. const props = defineProps(['item']);

B. const props = defineProps<{ item: T }>();

C. const props = defineProps<T>();

D. const props = defineProps({ item: String });

Solution

1. Step 1: Recall TypeScript generic prop syntax in Vue

   Using defineProps with a generic type requires specifying the prop shape with a type parameter, like { item: T }.

2. Step 2: Analyze each option

   const props = defineProps<{ item: T }>(); correctly uses defineProps<{ item: T }>(). const props = defineProps<T>(); misses the prop shape object. const props = defineProps(['item']); uses string array syntax, not generic. const props = defineProps({ item: String }); uses a fixed type, not generic.

3. Final Answer:

   const props = defineProps<{ item: T }>(); -> Option B

4. Quick Check:

   Generic props need object shape with type parameter [OK]

Hint: Generic props need object shape with type parameter in defineProps [OK]

Common Mistakes:

• Using array syntax instead of type object for generic props
• Omitting the prop shape object in defineProps
• Using fixed types instead of generics

3. Given this generic Vue component snippet, what will be the rendered output if item is a string "Hello"?

const props = defineProps<{ item: T }>();
const item = props.item;
return <div>{typeof item}: {item}</div>;

medium

A. Runtime error due to missing type

B. <div>object: Hello</div>

C. <div>number: Hello</div>

D. <div>string: Hello</div>

Solution

1. Step 1: Understand the typeof operator on the prop

   The typeof operator returns the type of the value at runtime. Since item is "Hello", a string, typeof item is "string".

2. Step 2: Determine the rendered output

   The returned JSX renders a div with text: "string: Hello".

3. Final Answer:

   <div>string: Hello</div> -> Option D

4. Quick Check:

   typeof 'Hello' = string, so output matches [OK]

Hint: typeof a string value returns 'string' in output [OK]

Common Mistakes:

• Confusing typeof result with the value itself
• Expecting object or number type for string value
• Assuming runtime error without type issues

4. Identify the error in this generic Vue component code:

const props = defineProps<{ item: T }>();
const item = props.item;
console.log(item.value);

medium

A. Accessing value assumes item is a ref, but it may not be.

B. Missing import of defineProps causes syntax error.

C. Generic type T must be declared before use.

D. Props must be defined as an array, not an object.

Solution

1. Step 1: Analyze usage of item.value

   Accessing value is valid only if item is a Vue ref. The generic type T could be any type, so item might not have value.

2. Step 2: Check other options

   Missing import of defineProps causes syntax error. is incorrect because defineProps is globally available in Vue SFCs. Generic type T must be declared before use. is incorrect because T is assumed declared in the generic context. Props must be defined as an array, not an object. is wrong because props can be defined as an object type.

3. Final Answer:

   Accessing value assumes item is a ref, but it may not be. -> Option A

4. Quick Check:

   Accessing .value requires ref type, generic may not be ref [OK]

Hint: Only refs have .value; generics may be plain values [OK]

Common Mistakes:

• Assuming generic type is always a ref
• Thinking defineProps needs import in SFC
• Believing props must be array, not object

5. You want to create a generic Vue component that accepts a list of items of any type and renders each item with a slot. Which approach correctly applies generics and slots together?

hard

A. Use defineProps(['items']) and render items directly without slots.

B. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component.

C. Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop.

D. Use defineProps<{ items: T }>() and render items without looping.

Solution

1. Step 1: Define generic props for list of items

   Using defineProps<{ items: T[] }>() correctly types the prop as an array of generic type T.

2. Step 2: Use slots with v-for to render each item

   Passing each item as a slot prop allows flexible rendering by the parent component, which is the correct pattern for generic components with slots.

3. Step 3: Evaluate other options

   Use defineProps(['items']) and render items directly without slots. lacks generics and slots. Use defineProps<{ items: any[] }>() and hardcode item rendering inside component. uses any losing type safety and hardcodes rendering. Use defineProps<{ items: T }>() and render items without looping. uses T instead of T[] and misses looping.

4. Final Answer:

   Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. -> Option C

5. Quick Check:

   Generic list + slot with v-for = Use defineProps<{ items: T[] }>() and a default slot with v-for passing each item as slot prop. [OK]

Hint: Generic list props need array type and slot with v-for [OK]

Common Mistakes:

• Using single item type instead of array for list props
• Not using slots for flexible item rendering
• Hardcoding rendering inside generic component