Slots are a way to reuse components. With props, we are passing data to a component. But what if we wanted to pass entire components to other components? That's where slots come in.
Slots are simply a way to pass on more complex code to our components. They can be just some HTML, or even entire components.
To insert HTML elements from a parent to a child component, we use the slot element inside a child component:
<slot></slot>
The actual content of the slot is specified in the parent component.
Here is an example of slots in use:
<!-- HTML -->
<div id="app"></div>
// JS
Vue.component("basicComponent", {
template: `
<div>
<slot name="firstSlot"></slot>
<slot name="secondSlot"></slot>
<slot></slot>
</div>
`
});
new Vue({
el: "#app",
template: `
<basicComponent>
<p slot="firstSlot">
This content will populate the slot named 'firstSlot...