$children and $slots

In this lesson, we will learn about $children and $slots.

We'll cover the following

The slots Property of the options Object

Vue components have two instance variables useful for accessing slots:

  • $children: an array of Vue component instances of the default slot.

  • $slots: an object of VNodes mapping all the slots defined in the component instance.

The $slots object has more data available. In fact, $children is just a portion of the $slots variable that could be accessed the same way by mapping over the $slots.default array and filtering by Vue component instances:

Get hands-on with 1400+ tech skills courses.