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>
element to serve as distribution outlets for content.<navigation-link>
, you might have:<slot></slot>
will be replaced by “Your Profile”. Slots can contain any template code, including HTML:<navigation-link>
‘s template did not contain a <slot>
element, any content provided between its opening and closing tag would be discarded.<navigation-link>
‘s scope. For example, trying to access url
would not work:<submit-button>
component:<button>
most of the time. To make “Submit” the fallback content, we can place it in between the <slot>
tags:<submit-button>
in a parent component, providing no content for the slot:slot
attribute.<base-layout>
component with the following template:<slot>
element has a special attribute, name
, which can be used to define additional slots:<slot>
outlet without name
implicitly has the name “default”.v-slot
directive on a <template>
, providing the name of the slot as v-slot
‘s argument:<template>
elements will be passed to the corresponding slots. Any content not wrapped in a <template>
using v-slot
is assumed to be for the default slot.<template>
if you wish to be explicit:v-slot
can only be added to a <template>
(with one exception), unlike the deprecated slot
attribute.slot-scope
attribute.<current-user>
component with the following template:<current-user>
component has access to the user
and the content we’re providing is rendered in the parent.user
available to the slot content in the parent, we can bind user
as an attribute to the <slot>
element:<slot>
element are called slot props. Now, in the parent scope, we can use v-slot
with a value to define a name for the slot props we’ve been provided:slotProps
, but you can use any name you like.v-slot
directly on the component:v-slot
without an argument is assumed to refer to the default slot:<template>
based syntax for all slots:v-slot
can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. So in supported environments (single-file components or modern browsers), you can also use ES2015 destructuring to pull out specific slot props, like so:user
to person
:v-slot
, allowing the definition of dynamic slot names:v-on
and v-bind
, v-slot
also has a shorthand, replacing everything before the argument (v-slot:
) with the special symbol #
. For example, v-slot:header
can be rewritten as #header
:<todo-list>
component that contains the layout and filtering logic for a list:todo
as a slot prop:<todo-list>
component, we can optionally define an alternative <template>
for todo items, but with access to data from the child:v-slot
directive was introduced in Vue 2.6.0, offering an improved, alternative API to the still-supported slot
and slot-scope
attributes. The full rationale for introducing v-slot
is described in this RFC. The slot
and slot-scope
attributes will continue to be supported in all future 2.x releases, but are officially deprecated and will eventually be removed in Vue 3.slot
Attributeslot
attribute on <template>
(using the <base-layout>
component described here as example):slot
attribute can also be used directly on a normal element:slot-scope
Attribute<template>
with the slot-scope
attribute (using the <slot-example>
described here as example):slot-scope
declares the received props object as the slotProps
variable, and makes it available inside the <template>
scope. You can name slotProps
anything you like similar to naming function arguments in JavaScript.slot='default'
can be omitted as it is implied:slot-scope
attribute can also be used directly on a non-<template>
element (including components):slot-scope
can accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments (single-file components or modern browsers) you can also use ES2015 destructuring in the expression, like so:<todo-list>
described here as an example, here’s the equivalent usage using slot-scope
: