Important! Slots after render don't guarantee order for positions for slots. Slot, which was the first, may have a different position after render.
Using Single Slots
Single slots are used when a child component only defines one slot within its template. The page component above uses a single slot to distribute content.
An example of the page component's template using a single slot is below:
To illustrate how the slot works we can set up a page as follows.
The end result will be:
If we didn't put anything between the page tags an instead had
What are slots?
Slots offer a convenient way of distributing content from a parent component to a child component. This content can be anything from text, HTML or even other components.
It can be helpful sometimes to think of slots as a means of injecting content directly into a child component's template.
Slots are especially useful when the component composition underneath the parent component isn't always the same.
Take the following example where we have a page component. The content of the page could
change based on whether that page displays e.g. an article, blog post or form.
Notice how the content of the page component can change. If we didn't use slots this would be more difficult as the inner part of the template would be fixed.
Remember: "Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope."