How to Use Component Slots in Vue.js
Today, I’m going to share how to use component slots in Vue.js. Let’s get started:
Table of Contents
Slots
Slots allow to pass data between two components. Let’s create a file called Component1.vue under the components folder & paste this code:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default{
}
</script>
Let’s create another file named Component2.vue and paste this code:
<template>
<div>
<Component1>
<p>Lorem Ipsum is simply dummy...</p>
</Component1>
</div>
</template>
<script>
import Component1 from "./components/Component1.vue";
export default {
components: {
Component1
}
};
</script>
If we pass any content between the <Component1>
& </Component1>
tags that will be rendered in the place of <slot></slot>
.
Fallback Content
If the parent component doesn’t pass any data, the child will render any elements inside its <slot></slot>
tag. Let’s see the example:
<template>
<div>
<slot>
<p>Default content.</p>
</slot>
</div>
</template>
<script>
export default{
}
</script>
Let’s remove the content from the parent component:
<template>
<div>
<Component1></Component1>
</div>
</template>
<script>
import Component1 from "./components/Component1.vue";
export default {
components: {
Component1
}
};
</script>
Now parent will show the child’s content. This is called fallback.
Named Slots
Named slots help us to inject data in multiple places. This is the structure of named slots:
<slot name="your-name-id"></slot>
Let’s see an example. The component1.vue:
<template>
<div>
<slot name="name1"></slot>
<slot name="name2"></slot>
</div>
</template>
<script>
export default{
}
</script>
The component2.vue:
<template>
<div>
<Component1>
<template v-slot:name1>
<p>Name 1 content</p>
</template>
<template v-slot:name2>
<p>Name 2 content</p>
</template>
</Component1>
</div>
</template>
<script>
import Component1 from "./components/Component1.vue";
export default {
components: {
Component1
}
};
</script>
That’s all.
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)