When you want to have more than one slot, you can give a name to each one of them.
To make our point, we will build an organization chart for "Scratchy co".
The main component has two slots:
Vue.component('organogram', { template: `<div class="organogram"> <h3>Scratchy co.</h3> <div class="boss"> <h3>Boss</h3> <slot name="boss">No boss</slot> </div> <div class="employee"> <h3>Employee</h3> <slot name="employee">No employee</slot> </div> </div>` })
You can see that we named the first slot boss and the second slot employee.
To decorate our organization chart, we will use the following CSS:
.organogram { border: 5px dashed dodgerblue; width: 300px; } .boss { border: 5px double mediumvioletred; } .employee { border: ...
