Learn how to master Vue.js components, props, and slots with this beginner-friendly guide. Discover how to pass data using props, communicate between parent and child components, and use default, named, and scoped slots to create dynamic content. Perfect for developers and interview preparation.
Vue.js is like a Lego set for building web pages. Just like Lego blocks fit together to make something amazing, Vue.js uses components to create awesome applications. Today, we’ll explore two key topics: components with props and slots for dynamic content. Let’s break it down so even a kid can understand!
Table of Contents
Vue.js Components and Props: Building Blocks with Data
What are Components?
Components are like the different Lego pieces. Each piece (or component) does one thing really well, like showing a picture, a button, or a card. When you combine them, you create your full web page!
What are Props?
Props are like little notes you pass to a Lego piece. Imagine you’re building a Lego car, and you write “color: red” on a note. The Lego piece knows, “Okay, I need to be red!” In Vue.js, props are how we send data from a parent (big piece) to a child (smaller piece).
How Props Work in Vue.js
- Parent Component: The parent sends a message (data) using props.
- Child Component: The child receives the message and uses it.
Here’s a simple example:
Parent Component (App.vue):
<template>
<ChildComponent carColor="red" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent }
};
</script>
Child Component (ChildComponent.vue):
<template>
<p>The car color is: {{ carColor }}</p>
</template>
<script>
export default {
props: ['carColor']
};
</script>
Output: The car color is: red
Key Points:
- Props are read-only, meaning the child component can’t change the data directly.
- Always define props in your child component to avoid errors.
Vue.js Slots: Making Components Flexible
What are Slots?
Slots are like filling in the blanks in a coloring book. The parent gives the child specific content to show inside. Slots make components super flexible and reusable.
Types of Slots
- Default Slot
The simplest kind! The parent puts content between the child’s tags, and the child shows it.
Parent Component (App.vue):
<template>
<ChildComponent>
<p>This is my custom content!</p>
</ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent }
};
</script>
Child Component (ChildComponent.vue):
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {};
</script>
Output: This is my custom content!
- Named Slots
Named slots are like giving each blank in your coloring book a label.
Parent Component (App.vue):
<template>
<ChildComponent>
<template #header>
<h1>Header Content</h1>
</template>
<template #footer>
<p>Footer Content</p>
</template>
</ChildComponent>
</template>
Child Component (ChildComponent.vue):
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
Output:
Header Content
(default slot)
Footer Content
- Scoped Slots
Scoped slots let the parent use data from the child to fill the blank.
Child Component (ChildComponent.vue):
<template>
<slot :user="userData"></slot>
</template>
<script>
export default {
data() {
return {
userData: { name: 'Alice', age: 12 }
};
}
};
</script>
Parent Component (App.vue):
<template>
<ChildComponent>
<template #default="{ user }">
<p>Name: {{ user.name }}, Age: {{ user.age }}</p>
</template>
</ChildComponent>
</template>
Output: Name: Alice, Age: 12
Interview Questions and Answers
Q1: What are props in Vue.js?
A: Props are used to pass data from a parent component to a child component. They are read-only and help in communication between components.
Q2: Can a child component modify props? Why or why not?
A: No, props are read-only. To modify the data, the child should emit an event to the parent and request a change.
Q3: What are slots in Vue.js?
A: Slots are placeholders in a component that allow parents to inject content dynamically.
Q4: What’s the difference between default and named slots?
A:
- Default Slot: Displays any content placed between a component’s tags.
- Named Slots: Use
nameattributes to differentiate multiple slots in a component.
Q5: How do scoped slots work?
A: Scoped slots let the parent access data from the child component using a scoped object passed to the slot.
Companies That Ask These Topics in Interviews
- Tata Consultancy Services (TCS)
- Cognizant
- Infosys
- Tech Mahindra
- Capgemini
- Mindtree
- Wipro
- IBM
- Accenture
- Deloitte
Conclusion
Understanding Vue.js components, props, and slots is crucial for building dynamic, reusable applications. Components act as the building blocks, props allow communication, and slots make them flexible. Mastering these topics will prepare you for both building real-world applications and acing interviews.
Which of these features do you use most often? Share your thoughts below! 🚀