Vue.js Slots What are slots?


Example

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