Slots Vuejs
You’re browsing the documentation for v2.x and earlier. For v3.x, click here.
> This page assumes you’ve already read the Components Basics. Read that first if you are new to components.
> In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here. The rationale for introducing the new syntax is described in this RFC.
Slot Content
Vue implements a content distribution API inspired by the Web Components spec draft, using the element to serve as distribution outlets for content.
This allows you to compose components like this:
navigation-link>
Then in the template for , you might have:
When the component renders, will be replaced by “Your Profile”. Slots can contain any template code, including HTML:
span>
Your Profile
navigation-link>
Or even other components:
Your Profile
navigation-link>
If ‘s template did not contain a element, any content provided between its opening and closing tag would be discarded.
Compilation Scope
When you want to use data inside a slot, such as in:
navigation-link>
That slot has access to the same instance properties (i.e. the same “scope”) as the rest of the template. The slot does not have access to ‘s scope. For example, trying to access url would not work:
navigation-link>
As a rule, remember that:
> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
Fallback Content
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 component:
We might want the text “Submit” to be rendered inside the most of the time. To make “Submit” the fallback content, we can place it in between the tags:
Now when we use in a parent component, providing no content for the slot:
will render the fallback content, “Submit”:
But if we provide content:
Save
submit-button>
Then the provided content will be rendered instead:
Named Slots
> Updated in 2.6.0+. See here for the deprecated syntax using the slot attribute.
There are times when it’s useful to have multiple slots. For example, in a component with the following template:
header>
main>