Vue $slots Object
Example
Using the $slots object to check if the parent has provided content for the 'topSlot'.
mounted(){
if(this.$slots.topSlot){
this.slotsText = "Content for the 'topSlot' slot is provided by the parent."
}
else {
this.slotsText = "Content for the 'topSlot' slot is NOT provided by the parent."
}
}
Definition and Usage
The $slots object represents the slots passed from the parent.
Slots passed from the parent can be seen by calling this.$slots, or by calling this.$slots.topSlot to see a specific slot named 'topSlot'.
The $slots object can be used to check if slots are provided by the parent component, like in the example above, or to write render functions.
Related Pages
Vue Tutorial: Vue Slots
Vue Tutorial: Scoped Slots
Vue Tutorial: Vue v-slot
Vue Reference: Vue v-slot Directive
