Updated March 29, 2023
Introduction to Vue.js slots
As we all have heard a lot about the Vue.js, which is basically an open-source javascript framework used to create web interfaces. Vue provides a lot of features and benefits to the programmer, which makes it very easy to create applications in it. Slots are one of the most powerful tools of the Vue.js framework, which helps in creating generic components other than the strict parent-child relationship. Slots allow the parent to inject any type of content in the child component. Slots are used for creating reusable components, which make things easier to create for programmers.
Syntax:
Below given is the basic syntax of using the slots in the Vue.js framework:
<template>
<div class ="new-class">
<slot>
…...content of the slot to be written here…….
</slot>
</div>
</template><slot> is used like the basic html tag with the opening and closing braces. In the above code, <slot> is used inside the parent <div> component. We can insert any html tags like <p>, <h1, h2…>, etc. in between the <slots> tag.
How do slots work in Vue.js?
Vue. js allows the passing of string, arrays, etc., from one component to another. It also allows the passing of html content from parent component to child component through the use of slots. But have you ever thought about why this passing of the html component is required? By passing string values in components, cross-scripting attacks on the web interfaces become very easy for the hackers. This issue can be resolved by slots in Vue.js by the passing of html content as the website becomes less vulnerable to such kinds of attacks.
In order to have a deep understanding of slots in the Vue.js javascript framework, we first need to understand few concepts related to it:
1. Basic Working
Whatever the content or the html tags passed from the parent component through the <child-component> tags, it gets rendered in the <slots> tag of the child component.
Let us understand its working with the help of an example.
Example:
Child.vue
<template>
<div class = "my_child">
<slots>
</slots>
</div>
</template>Parent.vue
<template>
<div class = "my_parent">
<child-component>
<h1> I am from parent component </h1>
<h2> I will get rendered in the child component </h2>
<p> This is the basic working of slots tag </p>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
}
}
</script>In the above code, as we have imported the Child.vue component in parent, so the content written inside the <child-component> tags, i.e. the headings <h1>, <h2> and paragraph <p> of the parent component ‘Parent.vue’ will get rendered in the <slots> tag of the child component ‘Child.vue’.
2. Content Fallback
If the parent component does not pass anything between the <slots> and </slots> tags, then the content or the tags, whatever is written inside these tags, are rendered by default.
Example:
Child.vue
<template>
<div class ="child">
<slots>
This is the default content which will be displayed if nothing is passed
</slots>
</div>
</template>Parent.vue
<template>
<div class = "parent">
<child-component> </child-component>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
}
}
</script>In the above code, we have not passed anything to be rendered in the <child-component> tags that will get rendered in the <slots> tags of Chile.vue component. So the default content is written in <slots> tag of Parent.vue file, i.e., this is the default content that will be displayed if nothing is passed.
Types of slots along with Examples in Vue.js
Let us see the types of slots along with their examples in the Vue.js to dive deep in it.
1. Scoped slots
Scoped slots are some different kinds of slots which are basically used when we want to access the properties of a child component from the parent component. They allow us to pass the property values from the child and access them in the parent component. The thumb rule of using the scoped slot is to pass the property values in the Child component only through the default or scoped slot.
Example:
Child.vue
<template>
<div class = "child-class">
<slot name = "child-slot1" : text = "text1"> </slot>
<slot name = "child-slot2" : text = "text2"> </slot>
</div>
</template>
export default {
data() {
return {
child-slot1: "this is the content of child-slot",
child-slot2: "this is the content of child-slot2"
}
}
}
</script>In order to access the properties of the child component, we need to create a template element and use the scope attribute with the name attached to that in the parent component.
Parent.vue
<template>
<div class = "parent-template">
<child-component>
<template slot= "child-slot1" slot- scope = "scoped-template1">
<h1> {scoped-template1.text} </h1>
</template>
<template slot= "child-slot2" slot- scope = "scoped-template2">
<h1> {scoped-template2.text} </h1>
</template>
</child-component>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
}
}
</script>2. Named slots
As the name indicates, named slots are the one with the name attributes with the slots tag. These named slots are useful when we want to inject different content at different positions of the component.
Example:
Child.vue:
<template>
<div class = "child-template">
<slots name ="slot1">
</slots>
<slots name = "slot2">
</slots>
</div>
</template>Parent.vue:
<template>
<div class = "parent-template">
<template #slot1>
<h1> I am in parent component </h1>
<p> This is the paragraph of parent component of slot1 </p>
</template>
<template #slot2>
<h2> I am in heading 2 of parent component </h2>
<p> This is paragraph of parent component of slot2 </p>
</template>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
}
}
</script>In the above code, we have imported the child component ‘Child.vue’ in the parent component and created the 2 different named slots ‘slot1’ and ‘slot2’ to insert different content at different positions. Both the slots are used with ‘#’ in the parent, as this is the shortcut to use the named slot.
Conclusion
The above description clearly shows what are slots in the Vue.js framework and why they are commonly used by the programmers while creating the web interfaces. As slots are very useful, but they are not quite easy to understand. So it is very important for a programmer to understand it properly before using them in the code as in-depth knowledge of them is mandatory for correct output.
Recommended Articles
This is a guide to Vue.js slots. Here we discuss the introduction, working, and types of slots along with examples in Vue.js. You may also have a look at the following articles to learn more –
