Slots | Vue.js

Creating an Application
Reactivity Fundamentals
Class and Style Bindings
Conditional Rendering
Fallthrough Attributes
Single-File Components
Server-Side Rendering (SSR)
Production Deployment
TS with Composition API
Render Functions & JSX
Vue and Web Components
Animation Techniques
This page assumes you've already read the Components Basics. Read that first if you are new to components.
We have learned that components can accept props, which can be JavaScript values of any type. But how about template content? In some cases, we may want to pass a template fragment to a child component, and let the child component render the fragment within its own template.
For example, we may have a <FancyButton> component that supports usage like this:
The template of <FancyButton> looks like this:
The <slot> element is a slot outlet that indicates where the parent-provided slot content should be rendered.
And the final rendered DOM:
Try it in the Playground
Try it in the Playground
With slots, the <FancyButton> is responsible for rendering the outer <button> (and its fancy styling), while the inner content is provided by the parent component.
Another way to understand slots is by comparing them to JavaScript functions:
Slot content is not just limited to text. It can be any valid template content. For example, we can pass in multiple elements, or even other components:
Try it in the Playground
Try it in the Playground
By using slots, our <FancyButton> is more flexible and reusable. We can now use it in different places with different inner content, but all with the same fancy styling.
Vue components' slot mechanism is inspired by the native Web Component <slot> element, but with additional capabilities that we will see later.
Slot content has access to the data scope of the parent component, because it is defined in the parent. For example:
Here both {{ message }} interpolations will render the same content.
Slot content does not have access to the child component's data. Expressions in Vue templates can only access the scope it is defined in, consistent with JavaScript's lexical scoping. In other words:
Expressions in the parent template only have access to the parent scope; expressions in the child template only have access to the child scope.
Because slot content is part of the parent's render scope, a <style scoped> block declared in the child component will not apply to it. If you need to style slotted content, do so from the parent component, or use the :deep() modifier in the child's scoped stylesheet (see Scoped CSS for details).
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a <SubmitButton> component:
We might want the text "Submit" to be rendered inside the <button> if the parent didn't provide any slot content. To make "Submit" the fallback content, we can place it in between the <slot> tags:
Now when we use <SubmitButton> in a parent component, providing no content for the slot:
This will render the fallback content, "Submit":
But if we provide content:
Then the provided content will be rendered instead:
Try it in the Playground
Try it in the Playground