- Support Vue
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Components Basics
- Component Registration
- Custom Events
- Dynamic & Async Components
- Handling Edge Cases
Transitions & Animation
- Enter/Leave & List Transitions
- State Transitions
Reusability & Composition
- Custom Directives
- Render Functions & JSX
- Production Deployment
- Single File Components
- Unit Testing
- TypeScript Support
- State Management
- Server-Side Rendering
- Reactivity in Depth
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Meet the Team
This page assumes you’ve already read the Components Basics. Read that first if you are new to components.
Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the
<slot> element to serve as distribution outlets for content.
This allows you to compose components like this:
Then in the template for
<navigation-link>, you might have:
When the component renders, the
<slot> element will be replaced by “Your Profile”. Slots can contain any template code, including HTML:
Or even other components:
<navigation-link> did not contain a
<slot> element, any content passed to it would simply be discarded.
There are times when it’s useful to have multiple slots. For example, in a hypothetical
base-layout component with the following template:
For these cases, the
<slot> element has a special attribute,
name, which can be used to define additional slots:
To provide content to named slots, we can use the
slot attribute on a
<template> element in the parent:
slot attribute can also be used directly on a normal element:
There can still be one unnamed slot, which is the default slot that serves as a catch-all outlet for any unmatched content. In both examples above, the rendered HTML would be:
There are cases when it’s useful to provide a slot with default content. For example, a
<submit-button> component might want the content of the button to be “Submit” by default, but also allow users to override with “Save”, “Upload”, or anything else.
To achieve this, specify the default content in between the
If the slot is provided content by the parent, it will replace the default content.
When you want to use data inside a slot, such as in:
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
<navigation-link>‘s scope. For example, trying to access
url would not work. 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.
New in 2.1.0+
Sometimes you’ll want to provide a component with a reusable slot that can access data from the child component. For example, a simple
<todo-list> component may contain the following in its template:
But in some parts of our app, we want the individual todo items to render something different than just the
todo.text. This is where scoped slots come in.
To make the feature possible, all we have to do is wrap the todo item content in a
<slot> element, then pass the slot any data relevant to its context: in this case, the
Now when we use the
<todo-list> component, we can optionally define an alternative
<template> for todo items, but with access to data from the child via the
slot-scopeis no longer limited to the
<template>element, but can instead be used on any element or component in the slot.
The value of
This is a great way to make scoped slots a little cleaner.