Vue $slots Object

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