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 callingthis.$slots, or by callingthis.$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
