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...