Generic components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a generic component in Vue?

A generic component is a reusable Vue component designed to work with different types of data or content by accepting props or slots, making it flexible for various uses.

beginner

How do you pass different content to a generic component in Vue?

You can pass different content using props for data or slots for HTML content, allowing the component to display or behave differently based on what is passed.

beginner

Why are generic components useful in Vue development?

They help avoid repeating code by creating one flexible component that can handle many cases, making your app easier to maintain and update.

beginner

What Vue feature allows a component to accept any child content?

Slots allow a component to accept any child content, making it generic and adaptable to different uses.

intermediate

How can you define a generic list component in Vue?

Create a component that accepts an array as a prop and uses a slot or a scoped slot to render each item, so it can display any list of items flexibly.

What makes a Vue component 'generic'?

A It only works with one fixed data type

B It cannot accept any props

C It can accept different data or content via props or slots

D It is written using class syntax

Generic components are flexible because they accept different data or content through props or slots.

Which Vue feature lets you insert custom HTML inside a component?

A Filters

B Directives

C Mixins

D Slots

Slots allow you to pass custom HTML content into a component.

How do you make a Vue component reusable for different lists?

A Accept an array prop and use slots to render items

B Hardcode the list items inside the component

C Use only one fixed item type

D Avoid using props

Passing an array prop and using slots lets the component render any list flexibly.

What is the main benefit of using generic components?

A Less repeated code and easier maintenance

B Slower app performance

C More complex code

D Fixed UI design

Generic components reduce repeated code and make maintenance easier.

Which of these is NOT a way to customize a generic Vue component?

A Using slots

B Using inline styles only

C Using props

D Using scoped slots

Inline styles alone do not customize component behavior or content like props or slots do.

Explain how you would create a generic Vue component that can display different types of content.

Think about how to pass data and HTML content to the component.

Describe the benefits of using generic components in a Vue application.

Consider how generic components affect your code and app structure.

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