What are slots in Vue?

Vue slots are specified areas proposed by the Vue team to place HTML content passed down from parent to child components. It is a medium for content distribution that gets rendered on child containers.

A Vue slots implementation is for content allotment to the number of child components from parents, passing HTML content to get run when the child component is loaded in DOM.

Vue slots become helpful to convert your component into reusable templates that will differently render based on various use cases. A child component containing a slots container can render different HTML content sent from its parent component.

Need and Purpose of using Slots

Multiple times HTML content passes from one component to another component. It’s not in the standard parent-to-child component approach but in a way that makes the reusable component.

Web templates are created using components that are kept in several locations to re-render. It will be great to reuse the component though render it differently in various regions according to use cases.

There is a need for content distribution for several reasons, like maintaining the structure. Vue slots are helpful to structurize HTML content that is used in building out components by template injection. It’s an efficient solution for passing down template content from parent to child components.

Vue slots are required in content positioning based on various use cases. A parent component arranges the content of the child component, as it wants to arise in the user interface.

History of Vue & Content Distribution

Vue was invented by “Evan You” working on AngularJs at Google. Well, he worked on AngularJs on numerous projects. He summarizes his opinion to extract the parts enjoyed about Angular and build something lightweight.

In AngularJs, content distribution is present as a concept of content projection. It is a concept by which we can project or insert the HTML content inside another component. In AngularJs, content projection is achieved using an ng-content tag placed inside the child template where HTML content sent from the parent will render as a child template loaded in DOM.

The example of AngularJs content projection in the parent-child relationship is given below:

Here a child component (Alice) will render the HTML content sent by its parent component (Bob).

The above example shows the working of content projection in AngularJs and how HTML content is passed between components that are rendered in DOM.

To simplify the content projection concept of AngularJs, the way it’s used for content distribution, and to use more lightly, slots are concocted in VueJs. The dissimilarity between the ng-content tag & the Vue slots tag is that Angular does not use the dynamic template with parent slot content. In the Vue slots, bind values in the parent slot are utilized in the child component.

To understand how slots work in Vue as a mode of content distribution and content positioning is illustrated with the parent-child problem statement.

Working of Slots with a parent-child problem statement

Here is a parent component (Bob) sending a do your homework code to run on the child (Alice) container and clean your room code to run on the child (Alina) container where slots are defined.

The below diagram shows the working of slots how a parent is injecting the HTML content in its child container for execution.

Initialize syntax of slots as follows will execute the HTML content and make it visible when its child component renders in DOM.

Here is a child component (Alice) that receives HTML content for execution in the slot area.

Here is a child component (Alina) that receives HTML content for execution in the slot area.

If the parent component (Bob) did not send any HTML content for execution in the child component slot area then the child component renders any elements in its slot tag.

Here is an example of the parent component (Bob) not sending any HTML content to the child Alina component.

An example of the child component (Alina) fallback content is as follows:

After the default behavior of slots, if a parent component wants to inject multiple HTML content into a child container according to different use cases. That is also possible with named slot features.

Named Slots

Slots are specified by their name attribute and permitted to define placeholders in the child component that will render from different regions of the parent component template. Named slots allow the distribution of content to run on multiple sections in the child component template.

To give slot names. Elements have a name attribute that differentiates between multiple slots. When we do not provide slots with an explicit name attribute, then it has the name default.

Named slots are required when a parent component renders multiple HTML content inside the child container at different positions based on several use cases.

Initialize syntax of named slots as follows will execute the multiple HTML content at different positions and make it visible when its child component renders in DOM.

Here is a parent component (Bob) sending a different HTML content to the child component that will render in their slot area specified by its name.

Here a child component (Alice) will render the HTML content arriving from the parent component in the slot area specified by its name.

Here a child component (Alina) will render the HTML content arriving from the parent component in the slot area specified by its name.

While component slots meet limited use cases, there are additional ways where the parent component slot template can access data from the child component running the slot content. It is possible with scoped slots features.

Scoped Slots

Scoped slots are a significant part of Vue.js that create more versatile and reusable components. Scoped slots are a feature proposed in Vue 2.1.0. It allows passing properties from child components to parent components for further access into a scoped slot. It looks like reverse property passing.

It requires creating a template in a slot to access data from the child component that renders the slot content. And especially helpful in building custom templates that utilize the data properties of child components.

Here, the child component (Alice) will send notification as data properties to a parent component for completing multiple subjects homework.

In the below example parent component (Bob) sends a do your homework code to run on the child (Alice) container and observes how much time is required by the child component (Alice) to complete the homework. A parent component utilizes the time data property of the child component to know the actual time taken to complete the work. If time passes beyond the limit, then the parent component would help a child to finish its task.

Here a child component (Alice) sends a timely notification to the parent component (Bob).

The above representation of the scoped slot example is with one use case. There could be multiple use cases where a scoped slot is required, also where the parent component wants to render some HTML content in DOM according to data properties received from the child component. It will be a conditional rendering depending on the child component data property.

Conclusion

This article represents the communication between parent and child components by passing the HTML content that will render on the child container. Hence the Vue slot is all about content distribution & content positioning makes reusable components. Here content positioning is achieved through named slots and scoped slots are helpful for parent components who want to access child data property.

Want to get in touch?

Please reach out to me on LinkedIn.