VueJs Slots

Remarks

Important! Slots after render don't guarantee order for positions for slots. Slot, which was the first, may have a different position after render.

Examples

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:

<html>
 <head>
 <title>Page Title</title>
 </head>
 <body>
 <slot>
 This will only be displayed if there is no content
 to be distributed.
 </slot>
 </body>
</html>

To illustrate how the slot works we can set up a page as follows.

<page>
 <p>This content will be displayed within the page component</p>
</page>

The end result will be:

<html>
 <head>
 <title>Page Title</title>
 </head>
 <body>
 <p>This content will be displayed within the page component</p>
 </body>
</html>

If we didn't put anything between the page tags an instead had we would instead yield the following result since there is default content between the slot tags in the page component template.

<html>
 <head>
 <title>Page Title</title>
 </head>
 <body>
 This will only be displayed if there is no content
 to be distributed.
 </body>
</html>

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.

Article

<page>
 <article></article>
 <comments></comments>
</page>

Blog Post

<page>
 <blog-post></blog-post>
 <comments></comments>
</page>

Form

<page>
 <form></form>
</page

>
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."

Conclusion

In this page (written and validated by A. Gawali) you learned about VueJs Slots . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Named Slots.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.