VueJS Slots is a way of injecting content into your rendered Vue components. This allows the component to become more flexible and reusable. In this tutorial, we're going to investigate how Vue slots can be used and explain a real world example of when you could use slots. There are a few ways of injecting data into your VueJS child components you can use props which are attribute based so you would normal do this with data living in a JSON object.
<todo-item message="todoMessage"></todo-item>
But this doesn't really work very well when you don't have data but want to display a message inside your child component. For example, let's say you have a child component that displays messages to the user like an alert box or notification. You can use a prop for this but it's not very flexible and the HTML isn't very readable.
<notification message="This is what your component template HTML will look like if you tried to pass in a long message into your notification prop. And don't even think about being able to customise the HTML inside of it."></notification>
This is when VueJS slots come to help you out. They allow you to inject in new content into your child element by using the HTML template. With slots our notification component could look like this.
<notification>
<h1>Alert</h1>
<p>Please check your email</p>
</notification>
We've been able to remove the prop attributes and replace it with simple HTML, now lets look at how the child component will look like. Before with props it could look something like this.
<template>
<div id="notifications">
{{ notification }}
</div>
</template>
<script>
export default{
props: ['notification']
}
</script>
When using slots we can replace the outputted notification variable {{ notification }} with a slot tag.
<template>
<div id="notifications">
<slot></slot>
</div>
</template>
VueJS will now inject any content from inside the parent component tag into this slot tag. ## Named Slots
The above example of slots only allow you to have one slot element inside a component but what if you have multiple areas that you want to inject content into. For example what if you have a modal box and you want to be able to inject in the title, content and button text. You can use named slots to define which tag you inject content into. Inside the parent component, you will define which slot you want to add content into.
<modal>
<h1 slot="modal-title">Are you sure you want to delete this record?</h1>
<p slot="modal-content">Click the button below to confirm deletion of the record.</p>
</modal>
Then inside the child modal component, you will need to name the different slots.
<template>
<div id="modal">
<div class="modal-title"><slot name="modal-title"></slot></div>
<div class="modal-content"><slot name="modal-content"></slot></div>
</div>
</template>
We've now told Vue which slot are for the title and which slot is going to be used for the content. View the demo to see how slots can be used with your VueJS application.