Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this post, I will cover a feature I like a lot in Vue, slots. I already covered how you can pass data to the components using the props, but slots allow us to pass custom templates. This might sound weird at first, but think of something like the modal. Every modal usually has a backdrop, and content container but the content inside can be different. You don’t want to create a full modal every time, and slots help us to do that in a more reusable way.
Initial component
I will not go into too many details when it comes to the initial component. Let’s just assume we have one, the PopUpMessage component, to which we will pass some content it will display. For simplicity, I will not add any show-and-hide logic to it.
Simple Usage
First, we need to add some code to our PopUpMessage component so that it knows where it will render your content. We do that by adding the slot tag inside of its template.
<template>
<div>
<div>PopUp Message</div>
<slot></slot>
</div>
</template>Now that we defined where content is going to be rendered, we need to pass it. In the simplest version…
